用formdata上传图片,只append了e.target.files[0],直接打印这个的话,只看见了很多参数没有看到本体,请求的数据量也不大,后端的文件夹里却有这张图片,也返回了URL
非常纠结这样写能不能真正的把图片本体传过去,请大佬解答
express开发图片上传的api方法:
// 引入fs模块,用于操作文件
const fs = require("fs");
// 引入path模块,用于操作文件路径
const path = require("path");
// 配置对象
let exportObj = {
upload,
delFile,
};
// 导出对象,供其它模块调用
module.exports = exportObj;
// 上传图片方法
function upload(req, res) {
// 定义一个返回对象
const resObj = Common.clone(Constant.DEFAULT_SUCCESS);
// 定义一个async任务
let tasks = {
// 校验参数方法
checkParams: (cb) => {
// 调用公共方法中的校验参数方法,成功继续后面操作,失败则传递错误信息到async最终方法
Common.checkParams(req.file, ["originalname"], cb);
},
// 查询方法,依赖校验参数方法
save: [
"checkParams",
(results, cb) => {
// 获取上传文件的扩展名
let lastIndex = req.file.originalname.lastIndexOf(".");
let extension = req.file.originalname.substr(lastIndex - 1);
// 使用时间戳作为新文件名
let fileName = new Date().getTime() + extension;
console.log(fileName);
// 保存文件,用新文件名写入
// 三个参数
// 1.图片的绝对路径
// 2.写入的内容
// 3.回调函数
fs.writeFile(
path.join(__dirname, "../public/upload/" + fileName),
req.file.buffer,
(err) => {
// 保存文件出错
if (err) {
cb(Constant.SAVE_FILE_ERROR);
} else {
resObj.data = {
// 返回文件名
fileName: fileName,
// 通过公共方法getImgUrl拼接图片路径
path: Common.getImgUrl(req, fileName),
};
cb(null);
}
}
);
},
],
};
// 执行公共方法中的autoFn方法,返回数据
Common.autoFn(tasks, res, resObj);
}
// 删除上传的文件
function delFile(req, res) {
// 定义一个返回对象
const resObj = Common.clone(Constant.DEFAULT_SUCCESS);
// 定义一个async任务
let tasks = {
// 校验参数方法
checkParams: (cb) => {
// 调用公共方法中的校验参数方法,成功继续后面操作,失败则传递错误信息到async最终方法
Common.checkParams(req.body, ["filename"], cb);
},
// 查询方法,依赖校验参数方法
remove: [
"checkParams",
(results, cb) => {
let fileName = req.body.filename;
let filepath = path.join(__dirname, "../public/upload/" + fileName);
fs.unlink(filepath, (err) => {
if (err) {
cb(Constant.DEL_FILE_ERROR);
} else {
cb(null);
}
});
},
],
};
// 执行公共方法中的autoFn方法,返回数据
Common.autoFn(tasks, res, resObj);
}
然后通过router把api地址暴露出来。
// 定义上传图片路由,POST请求
router.post("/upload", uploadMiddleware.single("img"), IndexController.upload);
// 定义上传图片路由,delete请求
router.delete("/delfile", IndexController.delFile);
接下来就可以在前端通过axios调用图片上传api来上传图片和删除图片。
5 回答4.8k 阅读✓ 已解决
4 回答2.4k 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
5 回答1.9k 阅读
2 回答1.1k 阅读✓ 已解决
2 回答1.3k 阅读✓ 已解决
3 回答2k 阅读
能传过去,他只是不显示.
你用其他工具,fiddler之类的,在这个位置能看到
