Vue Element-ui 自定义文件上传

4,924 阅读2分钟

element-ui自定义文件上传

Upload组件一些参数说明

参数说明类型可选值默认值
action必选参数,上传的地址string
headers设置上传的请求头部object
on-change文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用function(file, fileList)
before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。function(file)
before-remove删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。function(file, fileList)
http-request覆盖默认的上传行为,可以自定义上传的实现function(data)
limit最大允许上传个数number
on-exceed文件超出个数限制时的回调function(files, fileList)-
accept限定文件上传的文件类型 例如 accept=".xlsx,.xls"文本类型的数据

自定义文件上传

使用element-ui自定义上传文件的步骤: 1.将自动上传关闭 :auto-upload="false。 2.通过 http-request 覆盖默认的上传行为。 3.在http-request指定的回调中,获取到上传的文件对象。 4.将文件对象添加进FromData中. 5.将文件对象发送到后端

  • FormData对象

    FormData对象:存储键值对的对象,类型于map对象. FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。

    注:文件上传都是把文件对象存储在FromData中,然后发送到后端

    • FormData对象中存储的是一个键值对,键是string类型,值只能是blob(file文件对象)或者是一个字符串
    • 创建一个FromData对象,然后通过append() 方法将数据添加进对象中,该方法接收一个键值对: 键: String类型的值, 值: 可以是一个blob(文件流)或者是一个字符串
    • 使用append()方法时,可以通过第三个可选参数设置发送请求的头 Content-Disposition 指定文件名。如果不指定文件名(或者不支持该参数时),将使用名字“blob”。
    • 例子: 1.append(key,blob对象,文件名) 2.append(key,file对象)
    • 注意:FormData是一个特殊的对象,直接通过console.log打印时,是打印不出来的
  • 将FromDate对象发送到服务器

    • 将FromData放入到Post请求的请求体中,然后在请求头中添加 headers: {"Content-Type": "multipart/form-data"},指定传输的类型是FromData即可
  • 代码实现

    <template>
          <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :http-request="myUploadFile"
                :on-remove="handleRemove"
                :on-change="handlChange"
                :on-exceed="handlExceed"
                :file-list="fileList"
                :limit="1"
                accept=".xlsx,.xls"
                :auto-upload="false">
             <el-button slot="trigger" size="small" type="success">选取文件</el-button>
             <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件</div>
          </el-upload>
    </template>
    
    <script>
    
    
    import {importorder} from "@/api/infra/order";
    
    export default {
       name: 'TemplateImport',
       data() {
          return {
             //提交Loading
             submitLoading: false,
             fileList: []
          };
       },
       methods: {
          /**
           * 文件删除回调
           */
          handleRemove(file, fileList) {
             this.fileList = fileList;
          },
    
          /**
           * 选择文件时回调
           */
          handlChange(file, fileList) {
             this.fileList = fileList;
          },
          /**
           * 文件提交回调
           * @param data
           */
          myUploadFile(data) {
             let file = data.file;
             let formData = new FormData();
             formData.append("file", file);
             const loading = this.$loading({
                lock: true,
                text: '订单导入中',
             });
             importorder(formData).then(res => {
                loading.close();
                this.submitLoading = false;
                this.$confirm('', '导入成功', {
                   confirmButtonText: '确定',
                   type: 'success',
                   showCancelButton: false,
                   closeOnClickModal: false,
                   center: true
                })
             }).catch(() => {
                loading.close();
                this.submitLoading = false;
             })
          },
    
          /**
           * 导入按钮触发
           */
          submitUpload() {
             this.submitLoading = true
             if (this.fileList.length <= 0) {
                this.$message.error("请先选择上传文件")
                this.submitLoading = false;
                return;
             }
        	//触发 el-upload上传
             this.$refs.upload.submit(); //如果:http-request=""指定了回调函数,则会覆盖默认的上传,会流入到http-request的回调中
          },
          /**
           * 超出上传个数回调
           */
          handlExceed() {
             this.$message.error("只能选择一个文件进行上传")
          },
       }
    };
    </script>