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
版权声明:
作者:admin
链接:http://blog.mryxh.cn/3144.html
文章版权归作者所有,未经允许请勿转载。
THE END