h5 form multipart/form-data提交图片

Question

现在接口那边给了一个上传图片的接口 然后说要multipart/form-data格式 现在在传数据的时候出现了一点问题 代码如下

              <f7-input type="file" id="z_img" placeholder="Name"/>
              <span @click="shangchuan()">上传</span>
              
                        shangchuan:function(){
            var self = this
            var token_all = self.$global.token;
            var qurl = self.$global.qurl;
            var tupian = document.getElementById("z_img")
            var img_src = tupian.files[0]
            var data1 = new FormData();
            data1.append("file",img_src)
             self.$$.ajax({
                 url: qurl + "/api/common/uploadFile",
                 method: "post",
                 data: {data1},
                 processData : false,
                 contentType : false,
                 cache: false,
                 async:false,
                 headers: {
                 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarykZiow0s1qkwq4AJH'
                 },
                 beforeSend: function (xhr) {
                 },
                 success: function (xhr111, status) {
                     const info = JSON.parse(xhr111);
                      console.log(status)
                        console.log(xhr111)

                 },
                 error: function (xhr111) {
                 },
                 complete: function (xhr) {
                     // $$(".gjjzdiv").hide();
                 }
             });

          }

然后在谷歌浏览器里面传的是

但是我看网站web是这样的

求问我应该怎么改 以前从来没做过图片上传

Answer 1

$.ajax({
  ....
  data: data1,
  ....
});