Maison > interface Web > js tutoriel > Image formData basée sur Ajax et téléchargement de données

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

亚连
Libérer: 2018-05-22 14:44:41
original
1615 Les gens l'ont consulté

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>
Copier après la connexion

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 = &#39;block&#39;;
      imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}
Copier après la connexion

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);
      }
    }
  });
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal