做网站服务器哪个好,企业网站建设开发费用,网站建设的基础内容,一个网站要多少钱在使用 Element UI 的 el-upload 组件时#xff0c;默认情况下每次选择文件都会触发一次上传请求。如果你需要一次性上传多个文件#xff0c;而不是每个文件都触发一次请求#xff0c;可以通过一些配置和代码处理来实现。
方法一#xff1a;通过配置file-list#xff08;…在使用 Element UI 的 el-upload 组件时默认情况下每次选择文件都会触发一次上传请求。如果你需要一次性上传多个文件而不是每个文件都触发一次请求可以通过一些配置和代码处理来实现。
方法一通过配置file-list推荐使用
html部分
el-uploadclassupload-demo list-uploadbtnrefupload:actioncurBastUrl:auto-uploadfalse:on-removeupdataRemove:before-uploadbeforeUpload:on-changeupdatachange:file-listfileList:multipletrueel-button sizesmall点击上传/el-button
/el-upload
el-button typeprimary clicksubmitUpload确 定/el-buttonjs部分
submitUpload() { // 导入let formData new FormData(); // 用FormData存放上传文件this.fileList.forEach(file { formData.append(file, file.raw) }) formData.append(categoryDirectory, this.filedata.categoryDirectory)// importCase是上传接口importCase(formData).then((res) { //手动上传无法触发成功或失败的钩子函数因此这里手动调用 this.updataSuccess(res.data) }, (err) {})
}方法二通过配置http-request
html部分
el-uploadclassupload-demo list-uploadbtnrefupload:actioncurBastUrl:auto-uploadfalse:http-requestuploadFile:on-removeupdataRemove:before-uploadbeforeUpload:on-changeupdatachange:multipletrueel-button sizesmall点击上传/el-button
/el-upload
el-button typeprimary clicksubmitUpload确 定/el-buttonjs部分
submitUpload() { // 导入let tempData this.filedatathis.filedata new FormData() // 用FormData存放上传文件this.$refs.upload.submit() // 会循环调用uploadFile方法多个文件调用多次this.filedata.append(categoryDirectory, tempData.categoryDirectory)// importCase是上传接口importCase(this.filedata).then((res) { //手动上传无法触发成功或失败的钩子函数因此这里手动调用 this.updataSuccess(res.data) }, (err) {})
}
uploadFile(file) {this.filedata.append(file, file.file)
}
