上传图片是很常见的功能
但是这个功能有点挑战
要处理好：1.前端图片上传，2.后台接收图片，3.后台保存图片，4.将保存地址返回给前端，前端回显图片。
有不懂的同学可以咨询我微信号yizheng369
另外一份html+node参考源码：https://gitee.com/618859/picture-upload-node
效果
将电脑选择的文件图片预览：URL.createObjectURL(file.raw)
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())
// 原文链接：https://blog.csdn.net/huang100qi/article/details/104083949
// 文件上传接口
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 --------------------
祝你好运！
不懂你会问我吗？
