Ajax如何上传表单数据及文件

JavaScript / 2022年3月3日 / hamster

以往的ajax传参

        const title = $("input[name='title']").val();

        const content = editor.txt.html();
        $.ajax(
            {
                headers: {
                    'X-CSRF-TOKEN': ""
                },
                type: "post",
                async: false,
                url: '/account',
                data: {'title':title, 'content':content},
                success: function (res) {
                    console.log(res);

                }
            }
        );

以上方法只能传递参数，若遇到上传用户信息（姓名，性别，身份证）类似操作，则会报错

期间想到的处理方法，单独创建一个接口，借助这个接口单独上传图片文件，但操作麻烦。

一番度娘后，找到解决办法

        var formData = new FormData();
        formData.append('image', images);
        formData.append('name', name);

        formData.append('content', content);

        $.ajax(
            {
                headers: {
                    'X-CSRF-TOKEN': ""
                },
                type: "post",
                async: false,
                url: '/account',
                contentType: false, 
                processData: false,
                data: formData,
                success: function (res) {
                    console.log(res);
                 
                },
                error:function (res) {
                    console.log(res);
                }
            }
        );

FormData：用一些键值对来模拟一系列表单控件，即把form中所有的元素的name与value组成一个queryString。

详解可以度娘（主要作者也是一知半解）

特别注意

#必要参数，不加会报错
contentType: false  #发送数据到服务器时所使用的内容类型
processData: false  #请求发送的数据是否转换为查询字符串

Ajax, Jquery