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

3403771864 发布于2022-09-14 22:23 / 921人阅读

　　在开发中，文件上传下载是常见相关功能，现在就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的话需要先上传到服务器才行。

服务器托管私有云本地文件上传到云服务器的方法阿里云服务器上传用vue做好的页面变量及数据详解 database详解及实例

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

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

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

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

sf190404 2019-08-29 16:09 评论0 收藏0
微信小程序学习与wepy框架的使用详解

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

stormjun 2019-08-23 10:24 评论0 收藏0
微信小程序学习与wepy框架的使用详解

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

xiao7cn 2019-08-02 11:02 评论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 2019-08-05 17:19 评论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 2019-08-02 15:17 评论0 收藏0