javascript - 如何在后端的 ajax 请求中包含字符串值和图像文件？

Question

我正在尝试使用 jquery ajax 发送图像以及一些输入文本值

我尝试只发送图片，一切似乎都正常.. 但是当我包含带有文本值的输入时，这会显示出来 未捕获的类型错误:无法在“FormData”上执行“追加”:参数 2 不是“Blob”类型。

            var file_data = $('#picture').prop('files')[0];   
            var form_data = new FormData();   
            form_data.append('image', file_data);
            form_data.append(
                    'firstname'   ,   about[0],
                    'middlename'  ,   about[1],
                    'lastname'    ,   about[2],
                    'email'       ,   about[3],
                    'number'      ,   about[4],
                    'username'    ,   account[0],
                    'password'    ,   account[1],
                    'rfid'        ,   account[2],
                    'type'        ,   account[3],
                    'status'      ,   account[4],
            ); 
            $.ajax({
                type: "post",
                url: baseurl+"/admin/test",
                data: form_data,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                failure : function(jqXHR, textStatus, errorThrown) {
                    alert("error" + textStatus);
                },

请告诉我如何正确地做到这一点..

Answer 1

您应该使用 Content-type: multipart/form-data 发送您的请求，并注意您只能在每个 formData.append() 中附加一个键和值

PS:使用 camelCase 变量是 JS 的最佳实践:-)

const formData = new FormData()
const fileData = $('#picture').prop('files')[0]
formData.append('image', fileData)
formData.append('firstname', about[0])
/* add the rest of your data */
const config = {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
}

$.ajax({
    type: 'POST',
    url: baseurl + "/admin/test",
    config
});