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

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

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

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

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

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

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

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

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

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

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

摘要：，至此咱们的微信小程序的简单使用及了解算是分享完了，毕竟个人也是道行有限，没有钻研太深，这些只是本人在实际项目开发过程中用到和总结的经验，有太多不足或不对的地方，希望大家多多给予指出与改正，咱们一起来共同学习与进步微信小程序是一种不需要下载安装即可使用的应用，在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度，然而就是因为它的备受欢迎度以及越来越被企业所重视，也就形成了咱们开...

xiao7cn 2019-08-02 11:02 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

Terry_Tai 2019-08-05 17:19 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0