javascript - 圖片上傳的時候怎樣把圖片和字符串一起post提交到服務器?
問題描述
上傳圖片的時候需要提供用戶的登錄令牌和需要上傳的圖片。但是兩個不一樣的數據類型怎樣一起post服務器上啊!
mui.init(); function fsubmit(){ var data = new FormData(mui(’#uploadForm’)[0]); //獲取圖片 $.ajax({ url: ’http://192.168.1.8/api/user-center/avatar’, type: ’POST’, data: { key:localStorage.getItem(’key’), //獲取本地的登錄令牌 avatar:data//圖片}, cache: false, processData: false, contentType: false ,success:function(data){ console.log(data.datas.testURL);},error:function(xhr,type,error){ console.log(xhr.status+xhr.responseText); //一直返回401,沒有權限} }); return false; }
問題解答
回答1:post的data類型改成formdata,然后在formdata中裝載對象,以下是例子:
var fd = new FormData(); var file_data = $(’input[type='file']’)[0].files; // for multiple files for(var i = 0;i<file_data.length;i++){fd.append('file_'+i, file_data[i]); } var other_data = $(’form’).serializeArray(); $.each(other_data,function(key,input){fd.append(input.name,input.value); }); $.ajax({url: ’caiyongji.com/segmentfault’,data: fd,contentType: false,processData: false,type: ’POST’,success: function(data){ console.log(data);} });回答2:
你都new出來FormData了,就別再自己攢對象了嘛,就用new出來的這個啊……
mui.init();function fsubmit() { var fData = new FormData(); //這里用空的就行,后邊再append fData.append(’file’, mui(’#uploadForm’)[0], ’不知道你文件名是啥你自己去整下.jpg’); fData.append(’key’, localStorage.getItem(’key’)); //獲取本地的登錄令牌 $.ajax({url: ’http://192.168.1.8/api/user-center/avatar’,type: ’POST’,data: fData,processData: false,contentType: false,success: function (data) { console.log(data.datas.testURL);},error: function (xhr, type, error) { console.log(xhr.status + xhr.responseText);} }); return false;}
然后后端稍微調整下,能收FormData就行了。
回答3:謝邀:
token可以放到headers中,后端單獨對token做檢查,而該接口只處理圖片
相關文章:
1. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題2. javascript - 求賜教:網易郵箱Web端模擬登錄看信的加密參數_ntes_nnid、_ntes_nuid3. javascript - 使用angular 的ui-sref 中出現了中文參數,點擊跳轉后瀏覽器的地址欄里出現轉義后的%AE....%a%44. java - ConcurrentHashMap中的get()方法為什么可以不加鎖?5. javascript - QWebEngineView 如何爬 angular 的動態數據?6. html5 - 這個代碼顯示功能如何實現?7. javascript - 用JS 七牛上傳圖片出現文件已存在的錯誤(file exists)8. 工作近5年,3年Java Web ,近2年前端,未來何去何從?9. css3 - 圖片等比例縮放10. java - 字節流轉成字符串之后,在通過字符串轉成字節流后的文件為什么會不一樣?
