elementUI 上传文件使用formdata

根据elementUI的文档，是在上传的时候有一个上传图片的接口，点击上传之后会返回给你一个网络路径，你再将网络路径跟表单的其他的信息通过提交接口 提交到后台

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

action: 必选参数，上传的地址

但是假如后台只给你一个接口，让你通过formdata来提交。通过查看api发现还有个方法可以实现自定义上传

http-request：覆盖默认的上传行为，可以自定义上传的实现

用这个方法之前我们还要将auto-upload设置成false

auto-upload：是否在选取文件后立即进行上传

使用onchange方法得到文件的信息

on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

<el-upload class="upload-demo" action="" 
	:auto-upload="false" 
	:on-preview="handlePreview"
	:on-remove="handleRemove" 
	:http-request="uploadFile"
	:before-remove="beforeRemove" 
	:multiple="false" :limit="1"
	:on-change="changeBigImg"
	:on-exceed="handleExceed" 
	:file-list="bigFileList">
    <el-button size="small" type="primary">点击上传</el-button>
 </el-upload>

假如你想做上传图片时的验证就在onchange里面写

// 上传图片的验证
    changeBigImg(file, fileList) {
      this.bigFileList = fileList
      this.bigFile = file
    }

	// 上传图片
    uploadFile(params) {
      const fileObj = params.file !== null ? params.file.raw : null
      // FormData 对象
      const form = new FormData()
      // 文件对象
      form.append('image1', fileObj)
      form.append('id', this.uploadForm.id)
      form.append('cardName', this.uploadForm.cardName)
      // 调用保存接口 将form的值全都传过去
      saveCardList(form).then(res => {
          this.getDataList({ currentPage: 1 })
          this.dialogFormVisible = false
       })
    },

点击的提交的时候再调用uploadFile方法 就实现了自定义formdata上传文件了

	// 提交
    btnConfirm() {
      this.$nextTick(() => {
        this.uploadFile({ file: this.file })
      })
    },