我们如何接受 post 请求中的文件并将其上传到 Adonis JS 中的 mysql?
How do we accept a file in post request and upload it to mysql in Adonis JS?
我正在创建一个上传文件的应用程序。前端在Angular,后端是Adonis JS。我无法了解我们如何使用此框架接受来自 post 请求的文件并将它们上传到 MySQL。
我已经查看了文档,但那里什么也没有。
有人可以帮我提供一个简单的代码片段来说明我们是如何实现这一目标的吗?
您最好的选择是使用 Multer,Adonis 仅附带无法处理文件输入的 bodyParser。请阅读https://www.npmjs.com/package/multer
我用过 get-stream,发现它比 multer 简单多了。这是我的服务器端代码。
Route.post("/api/profilePic/set", async ({
request,
response
}) => {
try {
let myUserId = request.get().userId;
request.multipart.file("pic", {}, async file => {
const fileContent = await getStream.buffer(file.stream);
const profilePic = new ProfilePic();
profilePic.userId = myUserId;
profilePic.pic = fileContent;
const isAvailable = await ProfilePic.findBy("userId", myUserId);
const picSaveResponse = isAvailable ?
await Database.table("profile_pics")
.where("userId", "=", myUserId)
.update({
pic: fileContent
}) :
await profilePic.save();
});
await request.multipart.process();
response.status(200).json({
message: "Pic Updation success !",
data: null
}
});
} catch (err) {
response.status(500).json({
message: "Pic Updation failed !",
data: null
}
});
});
此外,为了完成回答,这就是我从 Angular 客户发送请求的方式。
saveProfilePic(reqst) {
// the request object has userId and pic
let blob = new Blob([reqst.pic], { type: 'image/png' });
const file = new File([blob], 'profilePic.png');
const formData = new FormData();
formData.append('pic', file, 'profilePic.png');
const headers = new HttpHeaders();
headers.append('Content-Type', 'multi-part/form-data');
const params = new HttpParams()
.set('userId', reqst.userId);
// params goes as the third parameter
return this.httpClient.post(UrlConstants.SAVE_PROFILE_PIC, formData, { params, headers: headers });
}
我正在创建一个上传文件的应用程序。前端在Angular,后端是Adonis JS。我无法了解我们如何使用此框架接受来自 post 请求的文件并将它们上传到 MySQL。 我已经查看了文档,但那里什么也没有。 有人可以帮我提供一个简单的代码片段来说明我们是如何实现这一目标的吗?
您最好的选择是使用 Multer,Adonis 仅附带无法处理文件输入的 bodyParser。请阅读https://www.npmjs.com/package/multer
我用过 get-stream,发现它比 multer 简单多了。这是我的服务器端代码。
Route.post("/api/profilePic/set", async ({
request,
response
}) => {
try {
let myUserId = request.get().userId;
request.multipart.file("pic", {}, async file => {
const fileContent = await getStream.buffer(file.stream);
const profilePic = new ProfilePic();
profilePic.userId = myUserId;
profilePic.pic = fileContent;
const isAvailable = await ProfilePic.findBy("userId", myUserId);
const picSaveResponse = isAvailable ?
await Database.table("profile_pics")
.where("userId", "=", myUserId)
.update({
pic: fileContent
}) :
await profilePic.save();
});
await request.multipart.process();
response.status(200).json({
message: "Pic Updation success !",
data: null
}
});
} catch (err) {
response.status(500).json({
message: "Pic Updation failed !",
data: null
}
});
});
此外,为了完成回答,这就是我从 Angular 客户发送请求的方式。
saveProfilePic(reqst) {
// the request object has userId and pic
let blob = new Blob([reqst.pic], { type: 'image/png' });
const file = new File([blob], 'profilePic.png');
const formData = new FormData();
formData.append('pic', file, 'profilePic.png');
const headers = new HttpHeaders();
headers.append('Content-Type', 'multi-part/form-data');
const params = new HttpParams()
.set('userId', reqst.userId);
// params goes as the third parameter
return this.httpClient.post(UrlConstants.SAVE_PROFILE_PIC, formData, { params, headers: headers });
}