vue自定义上传图片方法

   <ul class="driverStyle">

                <li @click="chooseImage('jsz')">
                  <div class="imgBox">
                    <img v-if="imageysz" :src="imageysz" class="avatar" id="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <p><span style="margin-right:4px;color: #F56C6C">*</span>道路运输证</p>
                  <input @change="imgChange($event,'filesysz','imageysz')" type="file" id="jsz" style="display:none">
                </li>

                <li @click="chooseImage('cl')">
                  <div class="imgBox">
                    <img v-if="imagexkz" :src="imagexkz" class="avatar" id="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <p><span style="margin-right:4px;color: #F56C6C">*</span>道路运输经营许可证</p>
                  <input @change="imgChange($event,'filexkz','imagexkz')" type="file" id="cl" style="display:none">
                </li>

                <li @click="chooseImage('yy')">
                  <div class="imgBox">
                    <img v-if="imagebxk" :src="imagebxk" class="avatar" id="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <p><span style="margin-right:4px;color: #F56C6C">*</span>保险卡照片</p>
                  <input @change="imgChange($event,'filebxk','imagebxk')" type="file" id="yy" style="display:none">
                </li>

                <li @click="chooseImage('insureyy')">
                  <div class="imgBox">
                    <img v-if="imagexsz" :src="imagexsz" class="avatar" id="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <p><span style="margin-right:4px;color: #F56C6C">*</span>行驶证</p>
                  <input @change="imgChange($event,'filesxsz','imagexsz')" type="file" id="insureyy"
                         style="display:none">
                </li>


                <li @click="chooseImage('ysz')">
                  <div class="imgBox">
                    <img v-if="imagehy" :src="imagehy" class="avatar" id="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                  <p><span style="margin-right:4px;color: #F56C6C">*</span>人车合影</p>

                  <input @change="imgChange($event,'fileshy','imagehy')" type="file" id="ysz" style="display:none">
                </li>

              </ul>

js

data:() {
      return {
        imageysz: '',
        imagexkz: '',
        imagebxk: '',
        imagexsz: '',
        imagehy: '',
        ruleForm: { //增加
          cert_photo: '',
          cert_road_permit:'',
          insurance_card: '',
          photo: '',
          id_card_photo: '',

        },
      }
}
 // 点击上传图片
      chooseImage(idName) {
        var idname = idName
        document.getElementById(idname).click();
      },
      // 上传图片事件
      imgChange(el, fileName, imageName) {
        var vm = this;
        var file = el.target.files[0];
        var fileUrl = ''
        var form = new FormData()
        form.append("filename", file)
        var type = file.type.split('/')[0];
        vm.$source.post('/Uploadfile/uploadpic', form).then(res => {
          console.log('2', file)
          var responseDate = res.data.result
          if (res.data.code == 200) {
            fileUrl = responseDate.file_url
            if (type === 'image') {
              var reader = new FileReader();  // 创建FileReader对象
              reader.readAsDataURL(file); // 读取file对象，读取完毕后会返回result 图片base64格式的结果
              reader.onload = function (e) {
                if (e) {
                  switch (fileName) {
                    case 'filesysz':
                      vm.ruleForm.cert_photo = fileUrl
                      vm.imageysz = e.target.result
                      break;
                    case 'filexkz':
                      vm.ruleForm.cert_road_permit= fileUrl
                      vm.imagexkz = e.target.result
                      break;
                    case 'filebxk':
                      vm.ruleForm.insurance_card = fileUrl
                      vm.imagebxk = e.target.result
                      break;
                    case 'filesxsz':
                      vm.ruleForm.photo = fileUrl
                      vm.imagexsz = e.target.result
                      break;
                    default:
                      vm.ruleForm.id_card_photo = fileUrl
                      vm.imagehy = e.target.result
                      break;
                  }
                }
                // imageUrl = e.target.result;
              }
              vm.$notify({
                title: '成功',
                message: '图片上传成功',
                type: 'success'
              });
            } else {
              vm.$notify.error({
                title: '错误',
                message: '上传了非图片'
              });
              return false
            }


          }
        })

      },

css

  .driverStyle {
    display: flex;
    flex-wrap: wrap;
  }

  .driverStyle > li {
    margin-right: 40px;
  }

  .driverStyle > li > p {
    text-align: center;
  }