vue+elementui自定义上传文件

Posted 2021-09-13 一个大秤砣

vue+elementui自定义上传文件

<el-upload
                class="upload-demo"
                action="#"
                ref="upload"
                :http-request="httpRequest"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :on-change="onChange"
                multiple
                :on-exceed="handleExceed"
                :file-list="fileList"
                :auto-upload="false"
                accept=".txt,.csv"
              >
                <el-button slot="trigger" size="small"
                  ><IconClass
                    icon-class="iconcloud-upload"
                  />上传文件</el-button
                >
                <div slot="tip" class="el-upload__tip">
                  支持.txt、 .csv格式
                </div>
              </el-upload>

submitUpload() {
      return new Promise((resolve, reject) => {
        this.$refs.upload.submit();
        const data = new FormData();

        this.fileList.forEach(file => {
          data.append("file", file.raw);
          //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
        });
        //后台接口
        uploadDatasource(data)
          .then(res => {
            if (res.code == 200) {
              resolve(res.data);
            } else {
              reject(res.msg);
            }
            this.fileList = [];
          })
          .catch(err => {
            this.fileList = [];
            console.log(err);
          });
      });
    },