使用饿了么update组件 实现多文件上传到后台以及本地图片显示功能

使用饿了么update组件 实现多文件上传到后台以及本地图片显示功能

查了很多博客，终于弄出来了。我就大概说一下。我的业务内容是要把一个表单统一上传上去，而且其中有字段也有图片。

<div class="el-form-item-three">
            <div class="el-form-item-dd2" v-for="arry1 in item.img" :key="arry1.id">
              <el-form-item :label="arry1.text" prop="imageUrl" >
                <div class="el-form-item-son">
                  <el-upload ref="upload"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-change="handleChange"
                    :auto-upload="false"
                    :file-list="fileList"
                    :data="ruleForm"
                    accept=".jpeg,.jpg,.png,.pdf"
                    >
                    <img ref="imgList" @click="imgchange(item.id,arry1.id)" :id="arry1.id" :src="arry1.image" alt="身份证">
                  </el-upload>
                </div>
              </el-form-item>
            </div>
          </div>

这是一个文件上传的组件。其中

auto:upload要设置成不自动上传。然后action就不设置了，我在提交表单的时候一起上传

on-change是要触发的函数，因为有三个表单选择，我是根据id来选择用户提交的是哪个表单

因为里面的内容有少许不一样，这里还做了一个功能this.menus2[0].img[this.imgid].image = URL.createObjectURL(file.raw)
这个是将你当时选择的图片路劲赋值给数组中图片的路径，这样就能实现你选到了哪张图片也会在页面中显示。

但是不能将URL.createObjectURL(file.raw)的值赋给要提交表单中，因为这个是一个bold值，本地能读取，但是无法传给后端。

这里的img添加了事件是因为我要通过id来将图片放到单有的变量里，好让在后面进行处理

这是实现后的效果。上传成功后就会把图片替换掉

这个是提交的方法，根据id来判断你提交的是哪个表单

submitForm(id) {
      if (id === 0) {
        this.URL = '/Settlement/peson'
      } else if (id === 1) {
        this.URL = '/Settlement/enterprise'
      } else if (id === 2) {
        this.URL = '/Settlement/student'
      }
      console.log(this.$refs.ruleForm[id])
      /* console.log(this.URL) */
      const formData = new FormData()
      // 根据不同表单push不同数据
      if (this.formid === 0) {
        formData.append('name', this.ruleForm.name)
        formData.append('idCard', this.ruleForm.idCard)
        formData.append('telephone', this.ruleForm.telephone)
        formData.append('frontPictureCard', this.data0)
        formData.append('backPictureCard', this.data1)
      } else if (this.formid === 1) {
        formData.append('enterpriseName', this.ruleForm.enterpriseName)
        formData.append('businessLicenseId', this.ruleForm.businessLicenseId)
        formData.append('contactName', this.ruleForm.name)
        formData.append('telephone', this.ruleForm.telephone)
        formData.append('businessLicenseImg', this.data0)
        formData.append('legalPersonCardImg', this.data1)
      } else if (this.formid === 2) {
        formData.append('studentName', this.ruleForm.name)
        formData.append('idCard', this.ruleForm.idCard)
        formData.append('telephone', this.ruleForm.telephone)
        formData.append('school', this.ruleForm.school)
        formData.append('graduationTime', this.ruleForm.graduationTime)
        formData.append('frontPictureCard', this.data0)
        formData.append('backPictureCard', this.data1)
        formData.append('studentCardCover', this.data2)
        formData.append('studentCardInfo', this.data3)
      }
      this.$refs.ruleForm[id].validate((valid) => {
        if (valid) {
          this.$http({
            method: 'post',
            url: this.URL,
            data: formData,
            headers: {
                Authorization: JSON.parse(window.sessionStorage.getItem('loginSuccess')).token
            }
          }).then(res => {
            console.log(res)
            if (res.data.code === 20000) {
              this.$message.success({ content: '上传成功!', duration: 2 })
            } else if (res.data.code === 20001) {
              this.$message.error({ content: '请勿重复提交!', duration: 2 })
            }
          })
        } else {
          alert('请填写完整信息')
          return false
        }
      })

因为这一路上基本都是我自己弄的，可能在一些方面代码会显得重复臃肿。

请多指教