首先定义后端我们需要配express静态资源文件
在app.js中配置
下载 npm i multiparty 插件
app.use('/upload',express.static("upload"))//静态文件
然后新建一个upload文件夹
express中定义接口
var multiparty = require("multiparty")//调用插件
//上传图片
router.post("/imgs", (req, res) => {
let form = new multiparty.Form()
form.uploadDir = "upload"
form.parse(req, (err, arr, imge) => {
let imgs = "http://localhost:3000/" + imge.file[0].path
res.send({
imgs,
code: 200,
msg: "成功"
})
})
})
前端利用element-ui组件库
<el-upload class="avatar-uploader" action="http://localhost:3000/imgs" :show-file-list="false" :on-success="handleAvatarSuccess">
<img v-if="updfrom.imgs" :src="updfrom.imgs" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//上面修改咱们定义的接口
//上传图片
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
this.addfrom.imgs = res.imgs//展示照片
}