项目需求是多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助FormData的格式向后台传文件组
html代码
<div class="upload-file"> <el-upload accept=".xlsx" ref="upload" multiple :limit="5" action="http://xxx.xxx.xxx/personality/uploadExcel" :on-preview="handlePreview" :on-change="handleChange" :on-remove="handleRemove" :on-exceed="handleExceed" :file-list="fileList" :http-request="uploadFile" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器 </el-button> <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过100m</div> </el-upload> </div>
修改:auto-upload="false"属性为false，阻止组件的自动上传
:http-request="uploadFile"覆盖上传事件
@click=“submitUpload”，给上传按钮绑定事件
data() {
return {
fileData: '', // 文件上传数据（多文件合一）
fileList: [], // upload多文件数组
uploadData: {
fieldData: {
id: '', // 机构id,
}
},
}
}
methods:{
// 上传文件
uploadFile(file) {
this.fileData.append('files', file.file); // append增加数据
},
// 上传到服务器
submitUpload() {
let fieldData = this.uploadData.fieldData; // 缓存，注意，fieldData不要与fileData看混
if (fieldData.id === '') {
this.$message({
message: '请选择上传机构',
type: 'warning'
})
} else if (this.fileList.length === 0) {
this.$message({
message: '请先选择文件',
type: 'warning'
})
} else {
const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 100);
if (!isLt100M) {
this.$message.error('请检查，上传文件大小不能超过100MB!');
} else {
this.fileData = new FormData(); // new formData对象
this.$refs.upload.submit(); // 提交调用uploadFile函数
this.fileData.append('pathId', fieldData.id); // 添加机构id
this.fileData.append('loginToken', this.loginToken); // 添加token
post(this.baseUrlData.url_02 + ":8090/personality/uploadExcel", this.fileData).then((response) => {
if (response.data.code === 0) {
this.$message({
message: "上传成功",
type: 'success'
});
this.fileList = [];
} else {
this.$message({
message: response.data.desc,
type: 'error'
})
}
});
}
}
},
//移除
handleRemove(file, fileList) {
this.fileList = fileList;
// return this.$confirm(`确定移除 ${ file.name }？`);
},
// 选取文件超过数量提示
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
//监控上传文件列表
handleChange(file, fileList) {
let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
if (existFile) {
this.$message.error('当前文件已经存在!');
fileList.pop();
}
this.fileList = fileList;
},
}
此时就达到上传4个文件只发送了一个xhr请求了
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“element-ui中el-upload多文件一次性上传的实现”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。