zoukankan      html  css  js  c++  java
  • Vue+element-ui Upload 的http-request自定义上传文件

     <el-upload
                  ref="upload"
                  :action="''"
                  :on-change="changeResult"
                  :http-request="requestUpload"
                  :before-upload="beforeExcelUpload"
                  :show-file-list="false"
                  :multiple="false"
                >
                  <el-button size="small" type="primary"> 导入分润表</el-button>
                </el-upload>
    

      

         // 上传文件
        changeResult(file, fileList) {
          this.form.file = file;
        },
        // 上传文件之前的钩子,上传前对文件的类型进行判断
        beforeExcelUpload(file) {
          const isExcel =
            file.name.split('.')[1] === 'xlsx' || file.name.split('.')[1] === 'xls';
          const isSize = file.size / 1024 / 1024 < 1;
          if (!isExcel) {
            this.$message({
              message: '只能上传xls或xlsx文件!',
              type: 'error',
            });
          }
          return isExcel;
        },
        //  覆盖默认上传行为
        requestUpload(params) {
          let fd = new FormData();
          fd.append('file', params.file);
          fd.append('FileName', params.file.name);
          fd.append('async', true);
          procQuery(this, {
            api: this.$api.financeProfitRecord,
            params: fd,
          }).then((res) => {
            //成功
            this.getList();
          });
        },
    

      

  • 相关阅读:
    [方法] 如何做产品功能设计
    js如何去除一个数组中与另一个数组中的值相同的元素
    js 导出Excel2
    js 导出Excel
    CSS3动画
    没有欲望是一种什么样的感觉
    L9-DOM高级应用
    L8-DOM操作应用
    L7-DOM基础
    L6-js定时器的应用
  • 原文地址:https://www.cnblogs.com/FACESCORE/p/13536722.html
Copyright © 2011-2022 走看看