Image formData basée sur Ajax et téléchargement de données

Cet article présente principalement en détail les images formData basées sur Ajax et les informations relatives au téléchargement de données. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

J'ai récemment travaillé sur un projet sur le projet de l'utilisateur. Le téléchargement de données et de formulaires s'est heurté à de nombreux pièges. Voici un résumé partagé avec tout le monde, en espérant aider tout le monde. (Xiaobai, tout le monde est invité à communiquer davantage)

Je n'entrerai pas dans les détails, viens juste au code ! !

1. Composant de téléchargement Expliquez que le projet est basé sur le framework vue

<template>
  <p class="newproduct">    
    <p class="topbox">
       <p class="shopbox">     
        <img class="shopicon" src="../../assets/head.jpg">
        <p class="shopname">开心就好的小店</p>
      </p>
    </p>
    <p class="goodsbox">
      <p class="startleft namebox">
        <label class="title">商品名称：</label><input class="noborder" v-model="goodsname" placeholder="请输入商品名称">
      </p>
      <p class="startleft goodstypebox">
        <label class="title">商品类型：</label>
        <select v-model="goodstype">
          <option value="请选择">请选择</option>
          <option value="图书">图书</option>
          <option value="卡券">卡券</option>
          <option value="服装">服装</option>
          <option value="礼品">礼品</option>
          <option value="运动装备">运动装备</option>
          <option value="电子设备">电子设备</option>
          <option value="日用百货">日用百货</option>
          <option value="其他">其他</option>
        </select>
      </p>      
      <p class="startleft describebox">
        <label class="title">商品描述</label>       
      </p class="startleft">
       <textarea class="describeinfo" v-model="goodsinfo"></textarea>
      <p class="startleft">
        <label class="title">单价:</label>
        <input class="noborder" placeholder="请输入单价" v-model="price">
      </p>
      <p class="startleft">
        <label class="title">数量:</label>
        <input class="noborder" placeholder="请输入数量" v-model="number">
      </p>
      <p class="startleft">
        <label class="title">联系电话:</label>
        <input class="noborder" placeholder="请输入手机号" v-model="phone">
      </p>
      <p class="startleft">
        <label class="title">地址:</label>
        <input class="noborder" placeholder="请输入地址" v-model="address">
      </p>
      <p class="startleft">
        <label class="title">图片</label>
        <img src="">
        <img src="">      
      </p>      
      <p class="addimg">
        <p class="imgbox">
          <img class="goodsimg" src="../../assets/addimg.png">
          <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
        </p>

        <p class="imgbox">
          <img class="goodsimg" src="../../assets/addimg.png">
          <input type="file" class="fileupload" accept="image/*" capture="camera" @change="viewimg()"/>
        </p> 
      </p>
    </p>
    <p class="bottombox" :style="{&#39;top&#39;:(height-12) + &#39;px&#39;}">
      <ul class="bottommenu">
        <li class="item" @click="backHome()">首页</li>
        <li class="item" @click="backShop()">返回货架</li>
        <li class="item border">放弃编辑</li>
        <li class="item" @click="uploadtest()">上架</li>
      </ul>
    </p>
    <p class="fillbottom"></p>
  </p>
</template>

Explication, il contient deux composants pour télécharger des images. Le premier en a plusieurs. Le mode Fichier, c'est-à-dire que plusieurs images peuvent être sélectionnées en même temps, suivi du mode fichier unique.

2. Vient ensuite l'aperçu de l'image

viewimg($event) {
  //获取当前的input标签
  var currentObj = event.currentTarget; 
  //找到要预览的图片img标签，亦可动态生成
  var img = currentObj.parentNode.children[0]; 
  setImagePreview(currentObj, img);
  function setImagePreview(docObj, imgObjPreview) {
    if (docObj.files && docObj.files[0]) {
      imgObjPreview.style.display = 'block';
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

La fonction principale de cette partie est d'afficher l'image sélectionnée. Bien sûr, il n'y a pas grand chose. ici. La situation d'une image

3. Partie principale, téléchargement d'image

/*采用formData形式上传图片和表单数据*/
upload: function() {
  var _self = this;
  var formData = new FormData();
  var inputs = $("input.fileupload");
  for (var i = 0; i < inputs.length; i++) {
    var file = inputs[i];
    if (inputs[i].files[0]) {
      formData.append("file", file.files[0], file.files[0].name);
    }
  }
  formData.append(&#39;barterCommodityname&#39;, _self.goodsname);
  formData.append(&#39;barterSellingprice&#39;, _self.price);
  formData.append(&#39;barterContactinformation&#39;, _self.phone);
  formData.append(&#39;barterCommodityquantity&#39;, _self.number);
  formData.append(&#39;barterCommodityaddress&#39;, _self.address);
  formData.append(&#39;barterDescriptioninform&#39;, _self.goodsinfo);
  formData.append(&#39;barterCategoryid&#39;, _self.goodstype);
  var _self = this;
  $.ajax({
    type: &#39;POST&#39;,
    url: &#39;http://10.145.0.05/goods/addGoods&#39;,
    dataType: "json",
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
      if (data.code == 200) {
        console.log("success");
        // _self.$router.push(&#39;/&#39;);
      } else {
        alert(data.message);
      }
    }
  });
}

Instructions :

Similaire à formData.append(' barterCategoryid', _self.goodstype); est une forme de paires clé-valeur pour enregistrer les données, et formData.append("file", file.files[0], file.files[0].name); reçu par le serveur Le nom du paramètre, le deuxième paramètre est l'objet fichier et le troisième paramètre est le nom du fichier, afin que plusieurs fichiers puissent être ajoutés au serveur sous la forme d'un tableau.

Lorsque le backend reçoit ce type de fichier, le type est spécifié comme : Type MultipartFile

Instructions spéciales :

processData : false ,
contentType : false,

Ces deux phrases doivent être ajoutées, sinon les données seront sérialisées et le backend ne pourra pas les reconnaître

Ce qui précède est ce que j'ai compilé pour tout le monde J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Utiliser l'historique pour résoudre le problème d'Ajax ne prenant pas en charge l'avance/le retour/l'actualisation (tutoriel graphique)

Méthode de détection Ajax pour le piratage de sites Web

Native JS implémente le contenu de réponse du flacon de requête inter-domaines Ajax (tutoriel graphique)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!