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"

},

這樣不可行，會改變原有的數據格式，不能這樣加。