element upload上传文件,el-upload 多文件上传
这篇文章主要介绍了元素-用户界面中埃尔-上传多文件一次性上传的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
项目需求是多个文件上传，在一次请求中完成，而ElementUI的上传组件是每个文件发一次上传请求，因此我们借助上传的格式向后台传文件组
超文本标记语言代码
div class=上传文件
埃尔-上传
接受=。xlsx
ref=上传
多个的
:limit=5
action= http://XXX。XXX。 XXX/个人/上传excel
:on-preview=handlePreview
:on-change=handleChange
:on-remove=handleRemove
:on-exceed=handleExceed
:file-list=fileList
:http-request=uploadFile
：自动上传=假
埃尔按钮槽=触发器大小=小类型=主要选取文件/el-button
El-button style= margin-left:133 px；size= small type= success @ click= submit upload 上传到服务器
/el-button
div slot= tip class= El-upload _ _ tip 只能上传文件格式文件，且不超过100米/格
/El-上传
/div
修改：自动上传=假属性为假的，阻止组件的自动上传
:http-request=uploadFile 覆盖上传事件
@click="提交上传",给上传按钮绑定事件
data() {
返回{
文件数据： ,//文件上传数据（多文件合一)
文件列表：[],//上传多文件数组
上传数据：{
字段数据：{
id: ，//机构id，
}
},
}
}
方法：{
//上传文件
上传文件（文件){
this.fileData.append(files ，file。文件)；//追加增加数据
},
//上传到服务器
submitUpload() {
让字段数据=这个。上传数据。现场数据；//缓存，注意，字段数据不要与文件数据看混
if (fieldData.id===) {
这个消息({
消息： 请选择上传机构，
类型："警告"
})
} else if(这个。文件列表。长度===0){
这个消息({
消息： 请先选择文件，
类型："警告"
})
}否则{
const islt 100m=this。文件列表。every(file=file。尺寸/1024/1024 100)；
如果(!ISL 100m米){
这个message.error(请检查，上传文件大小不能超过100MB！");
}否则{
这个。filedata=new FormData()；//新表单数据对象
这个参考文献。上传。submit()；//提交调用上传文件函数
this.fileData.append(pathId ，字段数据。id)；//添加机构编号
这个。文件数据。append(登录令牌，this。登录令牌)；//添加代币
贴(这个。baseurldata。URL _ 02 :8090/personality/upload excel ，this.fileData).然后((响应)={
if (response.data.code===0) {
这个消息({
消息： 上传成功，
类型："成功"
});
这个。file list=[]；
}否则{
这个消息({
消息：response.data.desc，
类型："错误"
})
}
});
}
}
},
//移除
手柄移除(文件，文件列表){
这个。文件列表=文件列表；
//返回这个。$确认(`确认确定移除${ file.name }？`);
},
//选取文件超过数量提示
handleExceed(文件，文件列表){
这个$消息。警告(` n当前限制选择5个文件，本次选择了${files.length}个文件，共选择了${files.length文件列表。长度}个文件`);
},
//监控上传文件列表
handleChange(文件，文件列表){
设existFile=fileList.slice(0，fileList.length - 1).查找(f=f . name===file。姓名)；
if (existFile) {
这个message.error(当前文件已经存在!);
文件列表。pop()；
}
这个。文件列表=文件列表；
},
}
此时，只发送了一个上传4个文件的xhr请求。
关于element-ui中el-upload多文件上传的实现本文到此为止。关于el-upload多文件上传的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。