vue.js 前端 Vue+ElementUI 实现下载excel文件模板和上传excel文件

需求如图：点击批量发卡按钮，弹出弹窗实现如下功能 html部分:

1.下载模板功能

注意：

vue3.0版本的在项目public目录下新建static文件夹，放入“文件模板.xlsx”文件。 vue2.0版本的在项目根目录下的static文件夹，放入“文件模板.xlsx”文件。

// 下载模板

downloadExcel(){

let a = document.createElement("a");

a.href = "./static/批量发卡模板.xlsx";

a.download = "批量发卡模板.xlsx";

a.style.display = "none";

document.body.appendChild(a);

a.click();

a.remove();

}

2.选择文件上传功能

使用el-upload实现上传功能 html部分：

class="upload-demo"

list-type="text"

accept=".xls,.xlsx" // accept 接受上传的文件类型

:action="UploadUrl()" // action 必选参数，上传的地址

:limit="1" // limit 最大允许上传个数

:on-exceed="handleExceed" // on-exceed 文件超出个数限制时的钩子

:on-change="handleChange" // on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被用

:on-remove="handleRemove" // on-remove 文件列表移除文件时的钩子

:auto-upload="false" //auto-upload 是否在选取文件后立即进行上传

:file-list="fileList" // file-list 上传的文件列表

>

选择文件

data(){

return {

fileList:[]

}

}

js部分：

// 确定上传

handleUploadFile(){

console.log('this.fileList',this.fileList)

// 如果上传的文件列表是空的，给出提示

if(this.fileList.length === 0){

return this.$message.warning('请先选择要上传的文件');

}

let file = this.fileList[0]

console.log(file,'file')

// 获取到文件的后缀以便于判断文件类型

if (file.name.indexOf('xlsx') == -1 || file.name.indexOf('xls') == -1) {

this.$message({

message: '请选择xlsx、xls格式文件',

type: 'warning'

});

return

}

// 把文件转成FormData格式上传

let dataFile = new FormData()

dataFile.append('file',this.fileList[0])

this.$axios({

url: "/item/upload/card",

method: "POST",

params:{

itemId: this.projectRow.itemId,

},

data: dataFile

}).then((res) => {

if (res.code=='0') {

this.$message.success('文件上传成功');

this.$emit("sure");

return false;

} else {

this.$message.warning(res.message);

}

});

},

// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

handleChange(file, fileList){

this.fileList.push(file.raw)

},

// 文件超出个数限制时的钩子

handleExceed(file,fileList) {

return this.$message.warning('一次只能上传一个文件')

},

//因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错

UploadUrl() {

return ""

},

// 文件列表移除文件时的钩子

handleRemove(file,fileList) {

this.fileList = fileList

}

},

// 取消

cancel() {

this.$refs.upload.clearFiles() //清除上传文件对象

this.fileList = [] //清空选择的文件列表

this.$emit("cancel");

},

注意：点击按钮手动控制上传，需要设置:auto-upload=“false”,如果不设置，默认情况下，当我们选中好了文件，默认就会上传我们所选的文件。

参考文章

 您阅读本篇文章共花了：