使用 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 });
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); } };