其他分享
首页 > 其他分享> > vue中excel文件上传总结

vue中excel文件上传总结

作者:互联网

1.前台代码:

<!-- 导入功能弹窗  -->
<el-dialog
  :title="this.file"
  :visible.sync="importTableVisible"
  width="40%"
  :close-on-click-modal="false"
  :show-close="false"
>
  <Tabs value="baseInfo">
    <TabPane label=" " class="import-label" name="baseInfo">
      <div class="rel ifr-show-box">
        <el-upload
          class="upload-demo"
          ref="upload"
          multiple="false"
          action="/chnview-api/channelApply/import"
          name="excelFile"
          :headers="headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-error="uploadFalse"
          :on-success="uploadSuccess"
          :file-list="fileList"
          :auto-upload="false"
          :before-upload="beforeAvatarUpload"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip"></div>
          <div>
            <div id="app-4">
              <ol>
                <li v-for="tip in tips">{{ tip.text }}</li>
              </ol>
            </div>
          </div>
          <el-button style="margin-left: 10px;" size="small" @click="submitUpload()">保存</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            @click="importTableVisible = false"
          >关闭</el-button>
        </el-upload>
      </div>
    </TabPane>
  </Tabs>
</el-dialog>
 
 
<script>
uploadSuccess(response, file, fileList) {
  if (response.code=="SUCCESS") {
    this.$message.success("导入成功!");
    this.$router.push("/main/channelApply");
  } else {
    this.$message.error("导入失败!");
  }
},
uploadFalse(response, file, fileList) {
   this.$message.error("文件上传失败!");
},
// 上传前对文件的大小的判断
beforeAvatarUpload(file) {
  const extension = file.name.split(".")[1] === "xls";
  const extension2 = file.name.split(".")[1] === "xlsx";
  const isLt2M = file.size / 1024 / 1024 < 10;
  if (!extension && !extension2) {
     this.$message.error("上传模板只能是 xls、xlsx格式!");
  }
  if (!isLt2M) {
    this.$message.error("上传模板大小不能超过 10MB!");
  }
  return extension || extension2;
},
submitUpload() {
  //触发组件的action
  this.$refs.upload.submit();
  this.importTableVisible = false;
},
handleRemove(file, fileList) {
  console.log(file, fileList);
},
handlePreview(file) {
  if (file.response.status) {
   this.$message.success("文件导入成功!");
  } else {
    this.$message.error("此文件导入失败!");
  }
},
importExcel: function() {
  this.importTableVisible = true;
}
</script>
 

2.后台接口

/**
 * 信息导入
 *
 * @param excelFile
 
* @return RestResponse
 */
@PostMapping("/channelApply/import")
public RestResponse excelImport(@RequestParam("excelFile") MultipartFile excelFile) throws Exception {
    //检查文件
    checkFile
(excelFile);
    InputStream in = excelFile.getInputStream();
    //多sheet导入时将每个sheet内容存入一个map中,key是sheet name,velue是sheet数据
   
List<Map<String, List<List<String>>>> list = ExcelUtils.excelSheetsUpload(in, 1, 0);
    channelApplyService.importExcel(list);
    return RestResponse.success();
}
 
 
/**
 * 导入校验(excel文件)
 *
 * @param file
 
*/
public static void checkFile(MultipartFile file) throws IOException {
    //判断文件是否存在
   
if (null == file) {
        // logger.error("文件不存在!");
       
throw new FileNotFoundException("文件不存在!");
    }
    //获得文件名
   
String fileName = file.getOriginalFilename();
    //判断文件是否是excel文件
   
if (!fileName.endsWith("xls") && !fileName.endsWith("xlsx")) {
        // logger.error(fileName + "不是excel文件");
       
throw new IOException(fileName + "不是excel文件");
    }
}
 

3.注意事项:

注意事项1:
multiple="false"    是否支持多文件上传,如果支持多文件上传可以设置为true
 
注意事项2:
action="/chnview-api/channelApply/import"    这里是相对路径

注意事项3:
name="excelFile"      这里的excelFile 要和后台接口保持一致

注意事项4:
 假如报401,查看系统中有没有权限验证。
如果自己的请求里没有token,则要在headers里面加上。
headers: {
  Authorization: "Bearer " + window.localStorage.getItem("access_token")
}
注意事项5:
上网查了资料,上传文件遇到401的解决办法中,有的说在headers里加入Content-Type headers: {
  "Content-Type": "multipart/form-data"
},
这样不可行,会改变原有的数据格式,不能这样加。

标签:文件,vue,false,excel,excelFile,file,error,message,上传
来源: https://www.cnblogs.com/erma0-007/p/11153384.html