element上传实现一种直接action,必选参数,上传的地址,String类型。一种可以自定义上传http-request,覆盖默认的上传行为,可以自定义上传的实现,就不用填写action。由于业务开发需要,选择自定义上传,代码如下:
<el-upload
ref="upload"
class="uploadAssets"
drag
action=""
:http-request="uploadSuccess"
:limit="1"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
:show-file-list="showFileList"
:on-exceed="handleExceed">
<i class="el-icon-receiving"></i>
<div class="el-upload__text">点击或将文件拖拽到这里上传<br/>支持扩展名:.xls、.xlsx(仅支持1个文件)</div>
</el-upload>
// 上传文件之前判断文件类型
beforeUpload(file) {
let isText = file.type === 'application/vnd.ms-excel'
let isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
return (isText | isTextComputer)
},
// 上传文件个数超过定义的数量
handleExceed (files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,请删除后继续上传`)
},
uploadSuccess(file) {
let formData = new FormData();
formData.append("file", file.file);
this.filesList = formData;
this.fileName = file.file.name;
let contents = {
'step':1,
};
return axios({
method: 'post',
url: `${api}/admin/XXXXX/import`,
headers : { 'AccessToken': getCookie("AccessToken") },
params: {
contents: aexEncrypt(contents)
},
data: this.filesList
}).then(res => {
let data = JSON.parse(aesDecrypt(res.data.content));
if (data.code == 200) {
} else if (data.code == 201) {
} else if (data.code == 202) {
window.location.href = data.data.loginUrl
}
}).catch(err => {
this.$message.error(err)
});
},
最后还需要提醒大家一点,本篇文章中的例子仅供参考学习,切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。