一、应用场景

1、直接上传

(1)、无参数上传

此场景在atd官网有大量案例，在此就不在赘述，直接上传的场景一般用在页面上的情况下，比如在单个页面上想做个批量导入的业务，点击批量导入按钮，点击上传Excel表格，然后将数据显示在页面上的表格中，这样直接在upload组件的action属性中直接加上后端接口的地址即可

(2)、有参数上传

此场景一般用在需要找对应身份的场景下，比如在上传头像时，你需要将人物的id也上传，这样才能将对应的头像存在对应的user下，这就要用到upload中的data属性
案例:(此处为伪代码)

<a-upload
        name="file"
        @change="uploadFileChange"
        action="/demo/user/uploadHeadPortrait" 
        :data="{userId:userId}"
      >
        <a-button type="primary">
          <a-icon type="export" />
          上传头像
        </a-button>
</a-upload>

methods:{
	uploadFileChange (info) {
        let self = this
        if (info.file.status === 'done') {
          if (info.file.response.code === 1) {
            self.$success({
              title: '提示',
              content: '经销商批量导入成功'
            })
          } else {
            self.$error({
              title: '提示',
              content: info.file.response.msg
            })
          }
        } else if (info.file.status === 'error') {
          self.$error({
            title: '提示',
            content: info.file.response.msg
          })
        }
      }
}
后端：
@PostMapping("/demo/user/uploadHeadPortrait")
public Map uploadHeadPortrait(@RequestParam("userId") String userId,@RequestParam("file") MultipartFile photo)){
	//TODO
}

2、不用upload组件上传

这种情形一般是在修改一组数据时，需要在前端先把上传文件变成base64文件流，点击修改按钮时，将base64文件数据和表单数据一起传入后台。

(1)、先转成base64和其他数据一起上传

<a-row :gutter="24">
    <a-form-item label="需要提交的资料" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
        <a-input placeholder="提交资料" :disabled="!isEdit" v-decorator="['submitData']"></a-input>
    </a-form-item>
</a-row>
 <a-row :gutter="24">
     <a-form-item label="图片" :labelCol="{ span: 5 }" :wrapperCol="{ span: 19 }">
         <a-input placeholder="提交资料" :disabled="!isEdit" v-decorator="['submitData']"></a-input>
          <img :src="productLogo" width="150px" />
          <a-upload
             name="file"
             list-type="picture-card"
             class="avatar-uploader"
             :show-upload-list="false"
             action=""
             :disabled="!isEdit"
             :beforeUpload="beforeUploadFile"
             @change="handleChange"
           >
           <img v-if="productLogo" :src="productLogo" alt="avatar" width="150px"/>
           <div v-else>
               <a-icon :type="loading ? 'loading' : 'plus'" />
               <div class="ant-upload-text">
                   上传图片
                 </div>
             </div>
         </a-upload>
</a-row> 

methods:{
	beforeUploadFile (file) {
        let self = this
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJpgOrPng) {
          self.$message.error('你只能上传图片文件', 1)
          return false
        } else if (!isLt2M) {
          self.$message.error('图像必须小于2MB', 1)
          return false
        } else {
          var reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = function (e) {
            self.productLogo = e.currentTarget.result  //获取文件的base64流  赋给全局变量productLogo
          }
        }
        return false //使upload组件停止上传
      },
editConfirm () {
        let self = this
        self.form.validateFields((err, values) => {
          if (!err) {
            self.$apiPost({
              url: self.$apiUrl.bank.update,
              data: {
                submitData: values.submitData,
                productLogo: self.productLogo
              }
            })
            .then(res => {
              if (res.data.code === '0') {
                self.$error({
                  title: '提示',
                  content: res.data.msg
                })
              } else {
                self.$success({
                  title: '提示',
                  content: res.data.msg
                })
                self.productId = ''
                self.getProductList()
                self.selectedRowKeys = []
                self.selectedRowKeysString = ''
              }
              self.detailvisible = false
            })
            .catch(error => {
              self.$error({
                title: '提示',
                content: error.message
              })
            })
          }
        })
      }
}

(2)、页面中单个按钮，传入id，并且将不用upload组件上传，先转成base64在上传

本来是想结合data属性加参数上传，但是在第一次上传是拿不到文件的base64流，然后只能在beforeUpload属性中直接使用axios请求上传

组件上action还是为空，而axios请求只能写在reader.onload里，不然第一次还是拿不到self.contractPDF的base64流，这种情况我也不知道为什么，希望有大神帮忙解惑一下。

 // 上传文件
      beforeUploadFile(file){
        let self = this
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e){
          self.contractPDF = e.target.result
          // console.log("pdf"+self.contractPDF)
          self.$apiPost({
            url:self.$apiUrl.supplier.uploadContractPDF,
            data:{
              contractId:self.contractId,
              contractPDF:self.contractPDF
            }
          }).then((res) => {
            if (res.data.code === '1') {
              self.visible = false
              self.$success({
                title: '提示',
                content: "合同导入成功"
              })
              self.file = true
            } else {
              self.$error({
                title: '提示',
                content: res.data.msg
              })
            }
          })
        }
        return false
      },