Implémentation de l'image formData et du téléchargement de données basé sur Ajax

Cette fois, je vais vous présenter la mise en œuvre du téléchargement d'images et de données formData basé sur Ajax. Quelles sont les précautions pour le téléchargement d'images et de données formData basées sur Ajax. Ce qui suit est un cas pratique, voyons. jetez un oeil.

J'ai récemment travaillé sur un projet concernant le téléchargement de données utilisateur et de formulaires, et j'ai rencontré de nombreux pièges. Je vais partager le résumé ici avec vous, dans l'espoir d'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('barterCommodityname', _self.goodsname);
  formData.append('barterSellingprice', _self.price);
  formData.append('barterContactinformation', _self.phone);
  formData.append('barterCommodityquantity', _self.number);
  formData.append('barterCommodityaddress', _self.address);
  formData.append('barterDescriptioninform', _self.goodsinfo);
  formData.append('barterCategoryid', _self.goodstype);
  var _self = this;
  $.ajax({
    type: 'POST',
    url: 'http://10.145.0.05/goods/addGoods',
    dataType: "json",
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
      if (data.code == 200) {
        console.log("success");
        // _self.$router.push('/');
      } 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

Je crois que vous les maîtrisez après avoir lu le cas dans cet article Méthode, pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment configurer Google Chrome pour prendre en charge les requêtes AJAX du protocole de fichier

Comment utiliser php pour recevoir les soumissions ajax Données en arrière-plan

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!