javascript - FormData實現(xiàn)多文件上傳的問題
問題描述
雖然知道FormData可以多文件同時上傳,但目前這次的需求不一樣,需要每個圖片附帶一些用戶的選擇參數(shù)。比如。scope.FileList為file多選后的文件數(shù)組。
如果按照常規(guī)多文件上傳的話完全沒問題。
、
但是目前的需求是每個圖片有著不同的參數(shù),我試過將參數(shù)直接丟到圖片對象里
scope.FileList.forEach(function(e,index){ e.Imagestype = ’新房’+index; data.append(’picture[]’,e,’picture’+index);})
或者將圖片和參數(shù)丟到object里然后……
scope.FileList.forEach(function(e,index){ var obj = new Object(); obj.type = ’test’ obj.image = e; data.append(’picture[]’,JSON.stringify(obj),’test’);})
我承認腦洞有點大。但是我實在不知道如何能以JSON的格式上傳文件。例如:
[ {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’},]
貌似FromData只有一個append方法可以操作。那么常規(guī)的多文件上傳是怎么一個思路呢?或者說這個需求壓根就不合理呢?
問題解答
回答1:你這種思路不可行。
formdata是單純的key-value結(jié)構(gòu),而文件只能在value這一層,不能再更深一層。
不過你可以通過在最后維護一個屬性對象來把屬性另外傳上去。
例如,你的formdata是這樣的結(jié)構(gòu):
{ 'image1': xxx.jpg, 'image2': xxx2.jpg, 'fileAttrs': {'image1': some attributes,'image2': some attributes }}
當然,fileAttrs要轉(zhuǎn)成JSON字符串。
回答2:本人沒有碰到過這樣的問題,不過我猜你可以將單個文件拆出來組成一個新對象,既然單個文件可以上傳,文件數(shù)組可以上傳,那么其他數(shù)據(jù)的組織形式應該也是可以上傳的。我猜關(guān)鍵可能是后臺如何準確地提取到文件。如果不行的話就等其他人的解決辦法吧。。
回答3:文件還是一個一個上傳比較好,多個文件上傳,時間較長,中斷概率很高,中斷了怎么處理?
回答4:我個人感覺說什么都沒用,主要還是和后臺商量一個合適的交互方法。比如,你多文件上傳已經(jīng)可以了。那你完全可以把你的數(shù)據(jù)分出來啊。nameList:'a,b,c,d,e,f,g,h';比如這樣,后臺通過nameList獲取到了一個字符串,然后解析出來,其實無所謂。本來數(shù)據(jù)結(jié)構(gòu)這種東西就是用來描述信息的,和后臺商量一個可以接受的格式吧
回答5:將圖片轉(zhuǎn)換為 base64 就可以用 JSON 傳
相關(guān)文章:
1. python - vscode 如何在控制臺輸入2. thinkPHP5中獲取數(shù)據(jù)庫數(shù)據(jù)后默認選中下拉框的值,傳遞到后臺消失不見。有圖有代碼,希望有人幫忙3. django - Python error: [Errno 99] Cannot assign requested address4. 求救一下,用新版的phpstudy,數(shù)據(jù)庫過段時間會消失是什么情況?5. python小白 關(guān)于類里面的方法獲取變量失敗的問題6. javascript - webpack1和webpack2有什么區(qū)別?7. java - 線上應用,如果數(shù)據(jù)庫操作失敗的話應該如何處理?8. python小白,關(guān)于函數(shù)問題9. Python2中code.co_kwonlyargcount的等效寫法10. [python2]local variable referenced before assignment問題
