Element: [Feature, Request] How to set multiple upload one by one?
Existing Component
是
Component Name
Upload
Description
Because of my file storage provider not support multiple upload?
I want to set upload one by one,this will solve the problem.
Whether to support such a setting?
chaclee
All 22 comments
Translation of this issue:
Existing Component
yes
Component Name
Upload
Description
Because, of, my, file, storage, provider, not, support, multiple, upload?
I want to set upload one by one, this will solve the problem.
Whether to support such a setting?
element-bot
on 6 Nov 2017
Upload 就是每次上传一个文件。如果同时选择了多个文件，你会看到 Upload 其实会发送多个请求。
Leopoldthecoder
on 12 Nov 2017
@Leopoldthecoder
可否看下我的demo，多选上传了图片，可是只收到了一个response，事实上图片都成功上传到服务器了。
https://zy62.com/upload/
```
methods: {
handleBefore: function(file) {
console.log("handleBefore : ", JSON.stringify(file));
this.upload_data['x:timestamp'] = getRandomInt(100, 999);
},
handleRemove: function(file, fileList) {
console.log("handleRemove : ", JSON.stringify(file));
},
handlePreview: function(file) {
console.log("handlePreview : ", JSON.stringify(file));
window.open(this.base_url + file.url);
},
handleSuccess: function(response, file, fileList) {
console.log("handleSuccess : ", response, JSON.stringify(file), JSON.stringify(fileList));
let item = {
"name": file.name,
"url": response.key
};
this.fileList.push(item);
},
handleError: function(err, file, fileList) {
console.log("handleError : ", JSON.stringify(err));
}
}
````
chaclee
on 17 Nov 2017
选择多个文件后，最终列表里只有一个文件，但是请求都成功了。你可以看看是哪里出了问题。
我在本地试了一下，上传多个文件是能够触发多次 on-success 的。
Leopoldthecoder
on 17 Nov 2017
@Leopoldthecoder
你看控制台console log，只调用了一次，右边的已上传列表是通过on-success回调push进去的，说明只调了一次
chaclee
on 17 Nov 2017
看下是不是和七牛有关吧，没有代码我也不知道问题出在哪。
Leopoldthecoder
on 17 Nov 2017
@Leopoldthecoder 传了代码：https://jsfiddle.net/cntaoyu/a1yt62c5/
chaclee
on 17 Nov 2017
Leopoldthecoder
on 17 Nov 2017
你好，我今天在我的项目中也是遇到了相同的问题，在上传选择多个文件时，虽然发送了多个请求并成功了，但页面上渲染的只是第一个成功的文件，并没有把全部文件渲染出来。我感觉是在success中对组件上绑定的文件列表变量进行了赋值导致的。所以请问有什么解决办法吗？谢谢。
992forever
on 22 Nov 2017
@992forever on-success打log看看，你把el-upload 中的:file-list="fileList"去掉就可以了
chaclee
on 22 Nov 2017
@cntaoyu 首先谢谢你的回复，去掉后确实能显示所有的上传图片，但是我后面可能还得对这些图片进行删除处理，包括刷新页面后，从后台拿到数据图片后进行数据图片的回显。但如果去掉这个filelist后这些图片的回显就做不了包括删除某些图片。所以这个:filelist必须得有
992forever
on 22 Nov 2017
@992forever 用另外一个变量或者回调来处理呢？
chaclee
on 22 Nov 2017
@cntaoyu 用另一个变量来处理应该是也不太行，主要是有对图片的删除操作，删除时会向后台传对应删除图片的id，这个id是最开始上传图片时后台返回压入到绑定在filelist上变量数组里的，如果用另一个变量来绑定到filelist上，那么最开始在上传图片时压进数组中的id在图片信息上是没有这个id的，所以应该是不行。
992forever
on 23 Nov 2017
@992forever 你可以自己push进去啊，你这个需求完全是可以解决的，我的项目就是这么解决的
chaclee
on 23 Nov 2017
@cntaoyu谢谢。解决了。
992forever
on 23 Nov 2017
Hi, @Leopoldthecoder . 我在做单文件上传的时候，如果连续点击 上传 按钮， on-change 回调中的 fileList 有就会 push 多个文件，这样就会导致一个问题，即：手动点击上传 this.$refs.upload.submit() 会发送多次请求。 请问如何解决？
在线等~
gongph
on 26 Mar 2018
这个列表只能单独定制，官方内置的图片墙没法用，多次上传成功，但response,fileList里你们做做了一个响应的数据，真坑
guohuihot
on 7 May 2018
on-success时可以将files临时存在$store中，判断files的长度是否和file-list参数值长度相等。相等时将files赋值给file-list。这样只调了一次，也可以将所有图片存起来。
simpledyt
on 13 Nov 2018
遇到同样问题的小伙伴+1，以下方法暂时解决问题
@992forever on-success打log看看，你把el-upload 中的
:file-list="fileList"去掉就可以了
iTaster
on 10 Jan 2019
以前弄好了，这段时间2.6.0这个版本又不行了
guohuihot
on 21 Mar 2019
1，不能删:file-list="fileList"，因为进入页面后需要显示已经上传的图片，需要使用el-upload的预览和删除功能
2，用[email protected]这个问题还在出现(多选文件只执行一次on-success回调)
3，既然多选文件后是多个ajax进行上传的，为什么不能调用多次on-success，是处于什么考虑的?
gzlock
on 27 Mar 2020
2.13.0遇到相同的问题(多选文件只执行一次on-success回调，不是很难理解
YuzhiZhang
on 23 Apr 2020
Related issues
yorululu
·
3Comments
FranzSkuffka
·
3Comments
fscardua
·
3Comments
Kingwl
·
3Comments
EdenSpark
·
3Comments
Most helpful comment
@992forever on-success打log看看，你把el-upload 中的
:file-list="fileList"去掉就可以了