前端代码
<el-upload
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:auto-upload="false"
:limit="1"
:on-exceed="OnExceed"
ref="upload"
:on-change="onChange"
:on-remove="onRemove">
<i class="el-icon-plus"></i>
</el-upload>
async onChange(file) {
let testFile = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase();
if(testFile != 'jpg' && testFile != 'jpeg' && testFile != 'png') {
this.$refs.upload.clearFiles();
this.$message({
type: 'warning',
message: '上传格式只能是jpeg/jpg/png!',
});
return;
}
this.portrait = false;
var formData = new FormData();
formData.append('name', file.name);
formData.append('file', file.raw);
let res = await this.$http.post('/upload', formData);
this.$message({
type: 'success',
message: '上传成功',
});
this.form.pic = res.data.filename;
},
2.后端代码
引入serveStatic和multer模块,用serveStatic先设置静态资源路径
//上传文件
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, __dirname + '/images/user');
},
filename: function (req, file, cb) {
cb(null, Date.now() + '.jpeg');
}
})
const upload = multer({storage: storage})
app.post('/upload', upload.single('file'), async (req, res) => {
const file = req.file
console.log(Date.now());
res.send(file);
})