Vue+ElementUI+Node实现上传图片

1. 前端代码

<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);

})