vue excel上传 elementUi excel上传带文件校验自定义上传下载模板

柔情只为你懂 2022-12-30 13:58 242阅读 0赞

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]  
可拖拽，带文件尾缀校验。记录一下方便今后项目复制粘贴。

# 组件 #

<el-dialog title="文件上传" :visible.sync="excelVisible" width="40%" center>
          
          
          
          
          <el-upload
            style="text-align: center"
            :show-file-list="false"
            :on-error="handleError"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            class="upload-demo"
            drag
            :action="upUrl"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">仅限xls和xlsx文件</div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button
              style="margin-right: 20px"
              size="mini"
              @click="excelVisible = false"
              >取 消</el-button
            >
            <el-link target="_blank" :href="downUrl">
              <el-button size="mini" type="success">下载模板</el-button>
            </el-link>
          </span>
        </el-dialog>

# methods #

//失败时的方法
    handleError(err) { 
          this.$message.info(err.data);
        },
    //成功时的方法 
    handleSuccess(response) { 
          // console.log(response);
          if (response.isSuccess) { 
            this.$message.success(response.error);
            this.getListByParam();
            return;
          }
          this.$message.info(response.error);
        },
     //上传之前校验的方法 
     handleBeforeUpload(file) { 
          // 校验
          let legalName = ["xlsx", "xls"];
          // 拿到后缀名
          let name = file.name.substring(
            file.name.lastIndexOf(".") + 1,
            file.name.length
          );
          if (legalName.includes(name)) { 
            console.log(legalName.includes(name));
          } else { 
            this.$message.info("文件格式不对，仅限xls和xlsx");
            return false;
          }
        },

# data #

//注意这里是和全路径，和全局axios没关系
          upUrl: "http://xxxx.cn:8060/erp/xxxxx",
        // 模板下载
          downUrl: "http://xxxx.cn:8060/erp/xxxxx",
          excelVisible: false,

## 自定义上传方法和下载模板 ##

<el-upload
             style="text-align: center"
              :show-file-list="false"
              :on-error="handleError"
              :on-success="handleSuccess"
              :before-upload="handleBeforeUpload"
              class="upload-demo"
              drag
               :http-request="uploadSectionFile"
              action=""
              multiple
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅限xls和xlsx文件</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
              <el-button
                style="margin-right: 20px"
                size="mini"
                @click="excelVisible = false"
                >取 消</el-button
              >
              <el-link target="_blank" :href="downUrl">
                <el-button size="mini" @click="donwLoadTemplate" type="success"
                  >下载模板</el-button
                >
              </el-link>
            </span>
          </el-dialog>

// 自定义上传
        uploadSectionFile(params){ 
            // console.log(params);
            let form = new FormData()
            form.append('file',params.file)
            this.axios.post(`/busFbx/uploadFBNConWareInfo`,form,{ responseType: "arraybuffer"})
            .then((res) => { 
              console.log(res);
              // let a = document.createElement("a");
              // let blob = new Blob([res.data]);
              // let objectUrl = URL.createObjectURL(blob);
              // a.setAttribute("href", objectUrl);
              // a.setAttribute("download", "分类模板.xls");
              // a.click();
              // // console.log(objectUrl);
              // URL.revokeObjectURL(objectUrl); // 释放内存
           
            }) .catch((res) => { 
            console.log(res);
            });
            
        },
        donwLoadTemplate() { 
          this.axios
            .get(`/busFbx/getFBNConWareTemplate`, { 
              responseType: "arraybuffer" /* 一定要加这个 不然文件内容显示不了 */,
            })
            .then((res) => { 
              let a = document.createElement("a");
              let blob = new Blob([res.data]);
              let objectUrl = URL.createObjectURL(blob);
              a.setAttribute("href", objectUrl);
              a.setAttribute("download", "分类模板.xls");
              a.click();
              // console.log(objectUrl);
              URL.revokeObjectURL(objectUrl); // 释放内存
            })
            .catch((res) => { 
              console.log(res);
            });
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221120/b5d71d1d60234b5ba56a465bb7f934bd.png