作者思路有两个 1. 用element组件中upload 下文已实现
2.用 input type=file 参数装进 formdata 传给后台 时间原因没实现
上代码

<!-- <input type="file" class="face" accept="image/*" @change="getFile($event)" ref="inputer"> -->
    <el-upload
   ref="upload"
   action="接口"
   :data="upData"
   :limit="1"
   multiple
   :on-success="onSuccess"
   :file-list="fileList"
   :on-remove="handleRemove"
   name="application"
   list-type="picture"
   :auto-upload="false">
<el-button icon="el-icon-plus">上传申请书</el-button>
// 表单提交按钮
<el-button type="primary" @click="onSubmit('form')">提交</el-button>

:data 图片上传携带的参数 （此处携带表单信息）
:limit 为规定上传图片数量
:on-success 上传成功的回调
:file-list 装图片的数组
:on-remove删除图片的回调
name 上传文件的 名称
list-type=“picture” 显示缩略图
:auto-upload=“false” 不自动上传 （延时上传）

export default {
  name: 'Perfect',
  props: { },
  components: {
  },
  data () {
    return {
    form: {
        salesName: '', // 售后收件人姓名
        salesPhone: '', // 售后收件人电话
        salesAddress: '', // 货品售后地址
        postCode: '', // 邮编
        account: '', // 交易结算账户
        cardNumber: '', // 卡号
        bankNews: '' // 开户行信息
      },
      fileList: [],
      }
      },
      methods: {
      onSuccess (response) {
      console.log(response)
      // 重新渲染
    },
    // 移除图片--报关单
    handleRemove (file) {
      console.log(file)
    //     // 删除完重新渲染页面
    //   })
    },
        // 需求是图片随表单上传 用的是ele的updata组件
    // 把表单数据通过图片参数方式提交到后台
   // 注释掉的部分是表单验证  需要的话直接打开注释就行
    onSubmit (formName) {
      console.log(formName)
      // this.$refs[formName].validate((valid) => { // 开启校验
      //   if (valid) {
        // 如果校验通过，请求接口，允许提交表单
          this.upData.supplierCode = this.supplierCode
          this.upData.salesName = this.form.salesName
          this.upData.salesPhone = this.form.salesPhone
          this.upData.salesAddress = this.form.salesAddress
          this.upData.postCode = this.form.postCode
          this.upData.account = this.form.account
          this.upData.cardNumber = this.form.cardNumber
          this.upData.bankNews = this.form.bankNews
          this.upData.supplierAuditstatus = '4'
          this.$refs.upload.submit()
        // } else {
        // 校验不通过
        //   console.log('校验失败')
        //   return false
        // }
      // })
    },

方案1 调用upload组件 已经完成!!!

方案2 没实现 说一下思路

<!-- <input type="file" class="face" accept="image/*" @change="getFile($event)" ref="inputer"> -->

 getFile(event) {
          this.form.file = event.target.files[0];
          //   event.target.files[0];这个东西就是图片
        },

onSubmit (formName) {
      console.log(formName)
      // this.$refs[formName].validate((valid) => { // 开启校验
      //   if (valid) {
        // 如果校验通过，请求接口，允许提交表单
         var fd = new FormData()
          fd.append('supplierCode', this.supplierCode)
          fd.append('salesName', this.form.salesName)
          fd.append('application', this.form.file)
          console.log(fd)  // 直接打印formdata是看不到东西的  需要下面的方法
          console.log(fd.get('salesName'))
          console.log(fd.get('application'))
          ajax({
			method: 'POST',
            url: '/ApplyFor/SuppPerfect',
            data: fd
}).then({})
        // } else {
        // 校验不通过
        //   console.log('校验失败')
        //   return false
        // }
      // })
    },

方案2因为时间原因 我没有实现 大家可以试试