javascript - 圖片上傳的時候怎麼把圖片和字串一起post提交到伺服器？

Question

上傳圖片的時候需要提供使用者的登入令牌和需要上傳的圖片。但是兩個不一樣的資料型別怎麼一起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;  
        }

Answer 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);
        }
    });

Answer 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就行了。

Answer 3

謝邀：

token可以放到headers中，後端單獨對token做檢查，而該介面只處理圖片