h5 form multipart/form-data提交圖片

現(xiàn)在接口那邊給了一個(gè)上傳圖片的接口 然后說要multipart/form-data格式 現(xiàn)在在傳數(shù)據(jù)的時(shí)候出現(xiàn)了一點(diǎn)問題 代碼如下

              <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();
                 }
             });

          }

然后在谷歌瀏覽器里面?zhèn)鞯氖?/p>

但是我看網(wǎng)站web是這樣的

求問我應(yīng)該怎么改 以前從來沒做過圖片上傳