<!-- 導入---------------------------------------- --><el-uploadstyle="margin-right: 10px":show-file-list="false":before-upload="beforeFileUpload"
><el-buttontype="success"icon="el-icon-upload":loading="percent < 100">{{ 100 > percent ? percent + "%" : "導入" }}</el-button></el-upload><!-- ---------------------------------------- -->

data() {return {// 上傳----------------------------------------actionUrl: "https://xxx.com/import",fmt: ["xls", "xlsx"],dur: 100,percent: 100,// ----------------------------------------
},
methods: {// 上傳文件----------------------------------------------------------------showFakeLoading() {this.interval && clearInterval(this.interval);this.percent = 0;this.interval = setInterval(() => {this.percent++;this.percent >= 99 && clearInterval(this.interval);}, this.dur);},hideFakeLoading() {this.interval && clearInterval(this.interval);this.percent = 100;},//文件上傳之前beforeFileUpload(file, id) {// 判斷是不是特定的格式________________________var fn = file.name.toLowerCase();var isFile = this.fmt.includes(fn.split(".").pop());const maxSize = 50; //限制大小const isLt2M = file.size / 1024 / 1024 <= maxSize;isFile || this.$message.error("上傳文件只能是" + this.fmt + "格式");isLt2M || this.$message.error("上傳文件大小不能超過" + maxSize + "MB");var allowUpload = isFile && isLt2M;allowUpload && this.showFakeLoading(); //虛假加載if (allowUpload) {// 為了實現form-data方式上傳文件----------------------------------------let formData = new FormData();formData.append("import", file);this.$axios.post(this.actionUrl, formData, {headers: {"Content-Type": "multipart/form-data"}}).then((d) => {this.$message.success(`文件“${file.name}”導入成功`);this.hideFakeLoading();//停止加載this.submitSearchForm();//刷新列表}).catch((d) => {this.$message.error("文件導入失敗，請稍后再試！");console.error(d);});// ----------------------------------------}return allowUpload; //若返回 false則停止上傳}
}

?

總結

以上是生活随笔為你收集整理的vue element upload 控件用form-data上传方式导入xls文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。