资讯专栏INFORMATION COLUMN

Vue实现Excel本地下载及上传的方法详解

3403771864 / 25人阅读

  在开发中,文件上传下载是常见相关功能,现在就Excel在该功能进行讲述:

  咱直接看代码:

  <div class="import-main-content">
  <div class="import-main-button" @click="checkFile">
  <div class="import-center" style="cursor: hand">
  <div>+</div>
  <div>上传Excel文件</div>
  </div>
  </div>
  <div style="margin: 5px auto; width: 350px">
  <div class="image-multiple-area" v-if="fileName">
  <span>{{ fileName }}</span>
  <img
  @click="removes"
  style="position: absolute; top: -1px; right: -1px"
  src="@/assets/icons/tag-remove-icon.png"
  class="remove-excel"
  alt=""
  />
  </div>
  <div v-else>尚未选择文件!</div>
  <div class="import-notice">注意:</div>
  <div class="import-notice">
  1. 请按照Excel表格模板内字段格式进行上传
  </div>
  <div class="import-notice">2. 导入表格数量控制在10000条以内</div>
  <div class="import-notice">
  3. Excel表格模板点击下载:<span
  style="color: #277cf0"
  @click="downLoadModel"
  >Excel表格模板</span
  >
  </div>
  </div>
  <input
  type="file"
  id="fileinput"
  style="display: none"
  @change="checkFileSure"
  accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
  />
  </div>


  data () {
  return {
  fileName: "", //Excel文件
  fileDir: "", //Excel文件路径
  }
  },
  checkFile() {
  document.querySelector("#fileinput").click();
  },
  checkFileSure() {
  let fileObj = document.querySelector("#fileinput").files[0];
  let file = document.querySelector("#fileinput");
  if (fileObj) {
  this.fileName = fileObj.name;
  // 文件类型
  let fileType = fileObj.type;
  let fileSize = fileObj.size;
  // 文件大小
  if (
  !(
  fileType === "application/vnd.ms-excel" ||
  fileType ===
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
  )
  ) {
  this.msgError("上传文件仅支持 Excel 格式!");
  file.value = "";
  return false;
  } else if (fileSize / 1024 / 1024 > 50) {
  this.msgError("文件大小超过50M!");
  file.value = "";
  return false;
  }
  this.importDone();
  } else {
  this.$message.error("请选择导入的excel文档!");
  return false;
  }
  },
  //下载Excel模版
  downLoadModel() {
  //getImportTempFile4Prize 为下载excel 模板接口
  getImportTempFile4Prize().then((res) => {
  window.location.href = `${this.$store.state.weShop.IMGHEAD}${res.URI}`;
  });
  },
  importDone() {
  if (this.fileName == null || this.fileName === "") {
  this.$message.error("请选择导入的excel文档!");
  return;
  }
  let fileObj = document.querySelector("#fileinput").files[0];
  console.log(fileObj.name);
  let file = document.querySelector("#fileinput");
  console.log(file);
  if (fileObj?.name) {
  let formData = new FormData();
  formData.append("file", fileObj);
  formData.append("upload_type", "02");
  let fileType = fileObj.type.split("/")[1];
  // uploadExcel 为后台上传Excel 接口
  uploadExcel(formData, fileType)
  .then((res) => {
  file.value = "";
  this.fileDir = res.PATH;
  this.form.PRIZE_NUM = res.NUM;
  })
  .catch(() => {
  file.value = "";
  })
  .then((res) => {});
  document.querySelector("#fileinput").value = "";
  } else {
  this.$message.error("请选择导入的excel文档!");
  document.querySelector("#fileinput").value = "";
  this.fileName = "";
  return false;
  }
  },

  上述代码只是在后台接口,前端还需做些简单操作,需要上传Excel的话需要先上传到服务器才行。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127718.html

相关文章

  • 微信小程序学习与wepy框架使用详解

    ...sync修饰符,同时子组件props中添加twoWay: true时,就可以实现数据双向绑定了。 注意:下文示例中twoWay为true时,表示子组件向父组件单向动态传值,而twoWay为false(默认值,可不写)时,则表示子组件不向父组件传值。这是与...

    sf190404 评论0 收藏0
  • 微信小程序学习与wepy框架使用详解

    ...sync修饰符,同时子组件props中添加twoWay: true时,就可以实现数据双向绑定了。 注意:下文示例中twoWay为true时,表示子组件向父组件单向动态传值,而twoWay为false(默认值,可不写)时,则表示子组件不向父组件传值。这是与...

    stormjun 评论0 收藏0
  • 微信小程序学习与wepy框架使用详解

    ...sync修饰符,同时子组件props中添加twoWay: true时,就可以实现数据双向绑定了。 注意:下文示例中twoWay为true时,表示子组件向父组件单向动态传值,而twoWay为false(默认值,可不写)时,则表示子组件不向父组件传值。这是与...

    xiao7cn 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    ... Vue 3 Vue CLI 3 项目构建基础 你了解vue3.0响应式数据怎么实现吗? 模拟 vue3.0 rfcs createComponent api 中props类型推导 Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面 用vue3公开思路从0实现最简化vue 在 WebStorm 中,配置能够识别 Vue CLI 3...

    Terry_Tai 评论0 收藏0
  • 关于Vue2一些值得推荐文章 -- 五、六月份

    ... Vue 3 Vue CLI 3 项目构建基础 你了解vue3.0响应式数据怎么实现吗? 模拟 vue3.0 rfcs createComponent api 中props类型推导 Vue-cli 3.5.1 + Webstorm 使用手机访问演示页面 用vue3公开思路从0实现最简化vue 在 WebStorm 中,配置能够识别 Vue CLI 3...

    sutaking 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<