express+vue 2+element-UI实现上传图片

1、首先在express项目目录下创建一个文件夹，命名为upload

2、然后在express项目下的app.js文件中引入该文件夹

     app.use('/upload',express.static('upload'))

3、安装multiparty模块

     npm install multiparty

4、在后端路由文件中填写

const express = require('express')
const router = express.Router()
const multiparty = require("multiparty")



router.post("/upload",(req,res)=>{
 
    let form = new multiparty.Form()
 
    form.uploadDir = "upload"
 
    form.parse(req,(err,formData,imgData)=>{
 
        //返回给前端  图片的访问地址
        res.send({
            imgPath:`http://localhost:3000/${imgData.file[0].path}`
        })
    })
 
})
 
module.exports = router

5、在vue子组件中

<template>
  <div>


    <el-upload
        action="http://127.0.0.1:3005/front_users/upload"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-success="handleSuccess"
        :on-remove="handleRemove">

      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UpLoadComponents",
  data(){
    return{
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods:{
    handleSuccess(response,file,fileList){
      //console.log("成功",response,file,fileList)
      //获取上传成功后的图片的地址
      this.$emit('sendImg',response.imgPath)
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
      this.$emit('removeImg',file)
      this.$axios.post('http://127.0.0.1:3005/front_users/remove',{
        imgPath:file.response.imgPath
      }).then(function (data){
        console.log(data.data)
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
}
</script>

<style scoped>

</style>

vue父组件中引用

<upload v-model="ruleForm.product_details.images" @sendImg="sendImg" @removeImg="removeImg"></upload>

methods:{
    //接受上传图片的路径
    sendImg(val){
      //console.log(val)
      this.ruleForm.product_details.images.push(val)
      console.log(this.ruleForm.product_details.images)

    },
    removeImg(val){

      this.ruleForm.product_details.images=this.ruleForm.product_details.images.filter(function (item) {
        return item!==val.response.imgPath
      })

    },
}