jq ajax文件上传(h5文件上传,后端接收异常,不小心传为字符串形式了)

jq ajax文件上传的时候,要小心传到后端不是二进制文件流

重点就是这个设置:contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',

contentType要么如上设置,要么设置为false,否则文件就会被当做字符串传递给后端

特别注意:如果是uniapp转成的h5一定不要修改uniapp默认的contentType,默认值示例:contentType: 'multipart/form-data',

好了上完整示例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>

<body>
    <input type="file" id="file1">
    <button id="btnUpload">upload</button>
    <br>
      <img src="1.png" alt="" style="width: 200px;" id="img1">
    <img src="jzz.png" alt="" style="display: none;" id="loading" width="50px" height="50px">
    <script>
        //监听传输
        $(document).ajaxStart(function () {
            $('#loading').show()
        })
        $(document).ajaxStop(function () {
            $('#loading').hide()
        })

        //建立单击事件
        $('#btnUpload').on('click', function () {
            let files = $('#file1')[0].files;
            if (files.length <= 0) {
                return alert('请选择文件后在上传')
            }
            //上传文件
            let fd = new FormData();
            fd.append('avator', files[0]);

            //发起jquery  ajax请求
            $.ajax({
                method: 'post',
                url: 'http://xxxx/api/index/upload',//换成你的接口
                data: fd,
                processData: false,
                contentType: 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW',
                success: function (res) {
                    alert('upload success')
                    //$('#img1').attr('src', 'http://www.liulongbin.top:3006' + res.url)
                     
                    console.log(res.url);
                }
            })
        })
    </script>
</body>

本代码,亲测可以正常运行,确实的图片,自己随便替换一下就行,这就是个demo

THE END