express+element实现上传图片

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