javascript - Bagaimana untuk menghantar dan menyerahkan imej dan rentetan ke pelayan semasa memuat naik imej?

Question

Semasa memuat naik gambar, anda perlu memberikan token log masuk pengguna dan gambar yang hendak dimuat naik. Tetapi bagaimanakah dua jenis data yang berbeza boleh diposkan ke pelayan bersama-sama?

         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

Tukar jenis data siaran kepada formdata, dan kemudian muatkan objek dalam formdata Berikut ialah contoh:

    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

Anda telah mencipta FormData baharu, jadi jangan simpan objek sendiri. Hanya gunakan yang baharu...

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

Kemudian bahagian belakang dilaraskan sedikit untuk menerima FormData.

Answer 3

Terima kasih atas jemputan:

Token boleh diletakkan dalam pengepala, dan bahagian belakang menyemak token secara berasingan, manakala antara muka ini hanya memproses imej