javascript - FormData實(shí)現(xiàn)多文件上傳的問(wèn)題
問(wèn)題描述
雖然知道FormData可以多文件同時(shí)上傳,但目前這次的需求不一樣,需要每個(gè)圖片附帶一些用戶的選擇參數(shù)。比如。scope.FileList為file多選后的文件數(shù)組。

如果按照常規(guī)多文件上傳的話完全沒(méi)問(wèn)題。
、
但是目前的需求是每個(gè)圖片有著不同的參數(shù),我試過(guò)將參數(shù)直接丟到圖片對(duì)象里
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’);})
我承認(rèn)腦洞有點(diǎn)大。但是我實(shí)在不知道如何能以JSON的格式上傳文件。例如:
[ {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’}, {type:’戶景圖’,Image:’file文件’},]
貌似FromData只有一個(gè)append方法可以操作。那么常規(guī)的多文件上傳是怎么一個(gè)思路呢?或者說(shuō)這個(gè)需求壓根就不合理呢?
問(wèn)題解答
回答1:你這種思路不可行。
formdata是單純的key-value結(jié)構(gòu),而文件只能在value這一層,不能再更深一層。
不過(guò)你可以通過(guò)在最后維護(hù)一個(gè)屬性對(duì)象來(lái)把屬性另外傳上去。
例如,你的formdata是這樣的結(jié)構(gòu):
{ 'image1': xxx.jpg, 'image2': xxx2.jpg, 'fileAttrs': {'image1': some attributes,'image2': some attributes }}
當(dāng)然,fileAttrs要轉(zhuǎn)成JSON字符串。
回答2:本人沒(méi)有碰到過(guò)這樣的問(wèn)題,不過(guò)我猜你可以將單個(gè)文件拆出來(lái)組成一個(gè)新對(duì)象,既然單個(gè)文件可以上傳,文件數(shù)組可以上傳,那么其他數(shù)據(jù)的組織形式應(yīng)該也是可以上傳的。我猜關(guān)鍵可能是后臺(tái)如何準(zhǔn)確地提取到文件。如果不行的話就等其他人的解決辦法吧。。
回答3:文件還是一個(gè)一個(gè)上傳比較好,多個(gè)文件上傳,時(shí)間較長(zhǎng),中斷概率很高,中斷了怎么處理?
回答4:我個(gè)人感覺(jué)說(shuō)什么都沒(méi)用,主要還是和后臺(tái)商量一個(gè)合適的交互方法。比如,你多文件上傳已經(jīng)可以了。那你完全可以把你的數(shù)據(jù)分出來(lái)啊。nameList:'a,b,c,d,e,f,g,h';比如這樣,后臺(tái)通過(guò)nameList獲取到了一個(gè)字符串,然后解析出來(lái),其實(shí)無(wú)所謂。本來(lái)數(shù)據(jù)結(jié)構(gòu)這種東西就是用來(lái)描述信息的,和后臺(tái)商量一個(gè)可以接受的格式吧
回答5:將圖片轉(zhuǎn)換為 base64 就可以用 JSON 傳
相關(guān)文章:
1. nignx - docker內(nèi)nginx 80端口被占用2. docker容器呢SSH為什么連不通呢?3. javascript - 連續(xù)點(diǎn)擊觸發(fā)mouseleave事件4. docker - 各位電腦上有多少個(gè)容器啊?容器一多,自己都搞混了,咋辦呢?5. 關(guān)于docker下的nginx壓力測(cè)試6. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””7. mac里的docker如何命令行開(kāi)啟呢?8. docker gitlab 如何git clone?9. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問(wèn)題 麻煩幫我看一下10. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問(wèn)題。

網(wǎng)公網(wǎng)安備