vue全部代码如下
<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
// 导入 axios 模块
import axios from 'axios'
const ChangeAvatar = (img) => axios({
url: 'http://localhost:3000/upload', // 此处可以替换为实际url
method: 'post',
anync: true,
contentType: false,
processData: false,
data: img
})
const update = (event) => {
const img = event.target.files[0]
const size = img.size
if (size > 3145728) {
alert('请选择3M以内的图片!')
return false
}
const Form = new FormData()
Form.append('avatar', img)
ChangeAvatar(Form)
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
}
node api接口代码如下。(express)
methods.js 文件
// 定义全局方法
module.exports = {
isArrayFn(o) {
return Object.prototype.toString.call(o) === "[object Array]";
}
}
// upload.js 路由文件
// 导入主要模块
const { v4: uuidv4 } = require("uuid");
const { isArrayFn } = require("../../common/methods");
const baseUrl = require("../../common/baseUrl");
const fileUpload = require('express-fileupload');
app.use(fileUpload());
router.post('/upload', function(req, res) {
let avatar = req.files.avatar;
const filePath = req.body.filePath; // 前端传过来的存储路径
const contents = `static/${filePath ? filePath : ""}`; // 文件存储路径
const filesArr = [];
if (isArrayFn(avatar)) {
// 多文件上传
for (let i = 0; i < avatar.length; i++) {
avatar[i].name = uuidv4() + "-" + avatar[i].name; // 修改文件名称 避免重复
filesArr.push({
url: baseUrl + "/" + contents + avatar[i].name,
});
avatar[i].mv(`${contents}${avatar[i].name}`, (err) => {
if (err) return res.status(500).send(err);
});
}
res.json({
status: 0,
msg: "File uploaded!",
data: filesArr,
});
} else {
// 单文件上传
avatar.name = uuidv4() + "-" + avatar.name; // 修改文件名称 避免重复
avatar.mv(`${contents}${avatar.name}`, function (err) {
if (err) return res.status(500).send(err);
return res.json({
status: 0,
msg: "File uploaded!",
data: {
url: baseUrl + "/" + contents + avatar.name,
},
});
});
}
})
这里没有使用multer,而是用的express-fileupload