首先定義后端我們需要配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//展示照片
}