node上传图片-vue前端+express后台
2022-05-11 11:06:57



上传图片是很常见的功能
但是这个功能有点挑战
要处理好:1.前端图片上传,2.后台接收图片,3.后台保存图片,4.将保存地址返回给前端,前端回显图片。
有不懂的同学可以咨询我微信号yizheng369
另外一份html+node参考源码:​​https://gitee.com/618859/picture-upload-node​


效果

将电脑选择的文件图片预览:URL.createObjectURL(file.raw)

node上传图片-vue前端+express后台_javascript

vue前端代码

注意:前端此处用了​​element-ui​​框架

sureFun() {
// 准备上传文件数据
var formData = new FormData();
formData.append("file", this.activeTopImg);
formData.append("name", '图片名称');

let config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
this.$axios
.post("/api/fileUpload", formData, config)
.then((res) => {
console.log("提交:", res);
this.$message({
message: "提交成功",
type: "warning",
});
// 重新获取数据
// this.getData();
})
.catch((err) => {
console.log("出错", err);
this.$message({
message: "服务器出错!",
type: "error",
});
});
},

node的express后台

// -------------- 图片文件上传处理 start --------------------
var Path = require('path')
// 读取静态资源
app.use(express.static('./'))
// 引入multer中间件,用于处理上传的文件数据
const multer = require('multer')
// 通过配置multer的dest属性, 将文件储存在项目下的tmp文件中
app.use(multer({ dest: './tmp/' }).any())
//

// 文件上传接口
app.post('/fileUpload', async function (req, res) {
// 上传的文件在req.files中
console.log('接收到图片上传数据:', req.body, req.files);

// 可能有多张图片
let arr = req.files;
let allUrl = []
for (let i = 0; i < arr.length; i++) {
const filename = arr[i].destination + arr[i].originalname;
console.log('默认名1:', arr[i].path);
console.log('改名:', filename);
// 修改图片文件名
fs.renameSync(arr[i].path, filename)
console.log('改名成功:', i);
let str = Path.join(serverUrl,filename);
// window的路径分割符 Path.sep 为反双斜杠 \ 此处要改为 单斜杠 /
let url = str.split(Path.sep).join('/')
url = 'http://'+url
allUrl.push({
id: arr[i].fieldname,
url,
})
}
res.send(
{
msg: 'upload successfully',
allUrl
})
});
// -------------- 图片文件上传处理 end --------------------

祝你好运!

不懂你会问我吗?



本文摘自 :https://blog.51cto.com/u


更多科技新闻 ......