async/await和图片上传
使用 async/await 提高图片上传的效率，同时可以保证代码的可读性和易维护性。在代码中需要注意以下几点：
-
在前端请求中，使用FormData对象来存储文件数据。其中key为 "file"，value为对应的文件。
-
服务端需要设置处理文件上传的中间件。代码示例如下：
const multer = require("multer"); const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, "./uploads"); }, filename: function(req, file, cb) { cb(null, file.originalname); } }); const upload = multer({ storage: storage });
- 在服务端控制器中，使用 async/await 处理文件上传的异步操作，代码示例如下：
const uploadImage = async (req, res) => { try { await upload.single("file")(req, res); console.log('image uploaded'); // do something with the uploaded image here } catch (err) { console.error(err); res.sendStatus(400); } };
- 前端调用来上传图片的代码示例如下：
const uploadImage = async () => { const formData = new FormData(); formData.append("file", file);
try { const response = await axios.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data" } }); console.log(response.data); } catch (err) { console.error(err); } };