Bootstrap

element ui 上传组件实现手动上传

首先需要给上传组件增加http-request属性,这个方法中可以获取到文件,并按照自己的方式进行上传。

<el-upload
      ref='fileUpload'
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名:.xls</div>
</el-upload>

设置了http-request属性之后,在选取文件后马上就会调用该方法。如果不想要马上上传的话,只需要增加:auto-upload=‘false’,然后在需要上传时,调用实例的submit方法即可执行httpRequest方法

methods:{
	upload(){
		this.$refs.fileUpload.submit()
	}
}

如果是单纯的上传文件,但需要携带参数的话,只需要增加属性即可,例如:

<el-upload
      ref='fileUpload'
      :data="{productId:123}"
      action='#'
      :http-request='httpRequest'
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :on-success='handleSuccess'
      accept='.xls'
      >
      <el-button
        size="small"
        type="primary"
       >上传文件</el-button>
      <div slot="tip">支持扩展名:.xls</div>
</el-upload>

但是如果是在表单中上传文件,且是直接和其他表单项数据一起上传的话,则需要手动进行上传。(不做表单校验则不需要手动进行数据传输,直接使用data属性包含额外参数即可)
如果需要做表单校验,则httpRequest只是为了获取到文件,首先不要设置auto-upload,选择文件后马上就调用httpRequest方法,在httpRequest方法中获取到文件并储存,方便后面做表单校验。

    httpRequest(params) {
      this.form.file = params.file
    },

在最终提交时,需要使用formData对象,包裹数据传输

      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = {
            file: this.form.file,
            secret: this.form.key
          }
          let form = new FormData()
          for (let i in data) {
            form.append(i, data[i])
          }
          uploadFn(form).then((res) => {
           this.$message('上传成功')
          })
        }
      })

记得在请求时,增加请求头:

      headers: {
        'Content-Type': 'multipart/form-data'
      }

然后你就会看到
在这里插入图片描述

完事!

;