美文网首页
elementui el-upload一次接口请求上传多个文件

elementui el-upload一次接口请求上传多个文件

作者: 新篇章 | 来源:发表于2021-04-30 15:08 被阅读0次

    el-upload组件多个文件上传都是多次请求上传接口,没有在文档中找到能够通过一次请求把所有文件上传的设置。最后只能通过用组件的部分功能,抛弃组件上传功能,通过axios自己将所有文件一次上传。

    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload 
        ref="upload" 
        :limit="10" 
        accept=".txt" 
        name="files" 
        :multiple="true" //可多选
        :action="upload.url" //必填随便填
        :headers="upload.headers"
        :disabled="upload.isUploading" 
        :on-change="handleFileChange"
        :before-remove="handleFileRemove" 
        :auto-upload="false"
        :file-list="upload.fileList" 
        drag
        >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处,或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“txt”格式文件!</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    
    data() {
        return {
          upload: {
            // 是否显示弹出层(用户导入)
            open: false,
            // 弹出层标题(用户导入)
            title: '',
            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            // 设置上传的请求头部
            headers: { Authorization: getToken() },
            // 上传的地址
            url: baseURL + 'codefileupload/upload',
            fileList: [],
            fileName: []
          }
        };
      },
      
      methods:{
        // 上传发生变化钩子
        handleFileChange(file, fileList) {
          this.upload.fileList = fileList;
        },
        // 删除之前钩子
        handleFileRemove(file, fileList) {
          this.upload.fileList = fileList;
        },
        // 提交上传文件
        submitFileForm() {
          <!-- 创建新的数据对象 -->
          let formData = new FormData();
          <!-- 将上传的文件放到数据对象中 -->
          this.upload.fileList.forEach(file => {
            formData.append('files', file.raw);
            this.upload.fileName.push(file.name);
          });
          <!-- 文件名 -->
          formData.append('fileName', this.upload.fileName);
          <!-- 自定义上传 -->
          axios
            .post(this.upload.url, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: getToken() } })
            .then(response => {
              if(response.code == 200){
                this.upload.open = false;
                this.upload.isUploading = false;
                this.$refs.upload.clearFiles();
                this.msgSuccess('上传成功!');
              }else{
                this.$message.error(response.msg);
              }
            })
            .catch(error => {
              this.$message.error('上传失败!');
            });
        }
      }
    

    相关文章

      网友评论

          本文标题:elementui el-upload一次接口请求上传多个文件

          本文链接:https://www.haomeiwen.com/subject/klbnrltx.html