在网上看了大家的实现方案,发现要不然就是使用 input 进行批量上传;使用el-upload的场景都需要两个按钮【选择文件、上传】才能实现上面的诉求,考虑到这样的交互都不太友好,所以使用自己的方式实现。 一、实现效果 先来说说实现的效果,点击上传按钮,弹出文件选择,选择后直接调用上传接口进行上传,只调用一个接口。 项目...
submitUpload() {//上传函数,如果把提交函数用在http-request钩子中,fileList多长就执行请求多少次接口,依旧是无法做到只请求一次上传多文件varformData =newFormData(); // 用FormData存放上传文件 this.fileList.forEach(file =>{ formData.append('reportFile', file.raw, file.raw.name);//此处一定是append fi...
el-upload组件多个文件上传都是多次请求上传接口,没有在文档中找到能够通过一次请求把所有文件上传的设置。最后只能通过用组件的部分功能,抛弃组件上传功能,通过axios自己将所有文件一次上传。 <el-dialog:title="upload.title":visible.sync="upload.open"width="400px"append-to-body><el-upload ref="upload" :lim...
在使用element中的el-upload是时,当我们要上传多个文件时,el-upload内部会多次调用this.$refs.upload.submit();方法,从而实现多个文件上传,但是有时候,我们希望,当上传多个文件的时候,只给后端发送一次请求,这样就需要先把el-upload的自动上传改为手动上传:auto-upload=“false” <el-upload ref="upload" :limit=...
在使用 Element UI 的 el-upload 组件进行多文件上传时,默认情况下,每个文件选择后都会触发一次上传操作,从而导致多次访问接口。如果你希望实现多文件上传但只访问一次接口,可以通过一些策略来合并这些文件并统一上传。以下是一个可能的解决方案: 禁用自动上传: 首先,通过设置 auto-upload 属性为 false 来禁用自动上传...
上传方法如下: //pdf上传uploadPdfFile(params,idx){//FormData 对象let file =params.file;if(file.type != 'application/pdf'){this.$message.error('请上传pdf格式文件!');return}varformData =newFormData();//文件对象formData.append('filePDF', file); ...
element-ui 的 upload 组件支持多选文件,只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传,于是就会存在多次的上传请求,由于后台的接口要求是一次请求能够上传多个文件,且我们也知道请求多了会对服务器造成更大的压力,因而基于多种原因,这个 upload 的上传行为得进行改造一番。 先...
:file-list="fileList" :on-change="addFile" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </el-upload>胡子...
"multiple" :file-list="fileList" :on-change="addFile" :auto-upload="false"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </el-upload...