Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung

Dieses Mal werde ich Ihnen die Rue-Implementierung von formData-Bildern und Daten-Uploads basierend auf Ajax vorstellen Schauen Sie mal rein. Ich habe kürzlich an einem Projekt zum Thema Benutzerdaten und Formular-Upload gearbeitet und bin auf viele Fallstricke gestoßen. Ich werde die Zusammenfassung hier mit Ihnen teilen, in der Hoffnung, allen zu helfen. (Xiaobai, jeder ist herzlich eingeladen, mehr zu kommunizieren)

Ich werde nicht zu sehr ins Detail gehen, komme einfach zum Code! !

1. Upload-Komponente

Erklären Sie, dass das Projekt auf dem Vue-Framework basiert

Erklärung, es enthält zwei Komponenten zum Hochladen von Bildern . Dateimodus, d. h. es können mehrere Bilder gleichzeitig ausgewählt werden, gefolgt vom Einzeldateimodus.

<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>

2. Als nächstes folgt die Vorschau des Bildes

Die Hauptfunktion dieses Teils besteht darin, das ausgewählte Bild anzuzeigen Hier. Die Situation eines Bildes

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

3. Kernteil, Bild-Upload

/*采用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);
      }
    }
  });
}

Anleitung:

Ähnlich wie formData.append(' barterCategoryid', _self.goodstype); ist eine Form von Schlüssel-Wert-Paaren zum Speichern von Daten und formData.append(“file”, file.files[0], file.files[0].name); Vom Server empfangen Der Parametername, der zweite Parameter ist das Dateiobjekt und der dritte Parameter ist der Dateiname, sodass dem Server mehrere Dateien in Form eines Arrays hinzugefügt werden können.

Wenn das Backend diesen Dateityp empfängt, wird der Typ wie folgt angegeben: MultipartFile-Typ

Besondere Anweisungen:

processData: false ,

contentType: false,
Diese beiden Sätze müssen hinzugefügt werden, sonst werden die Daten serialisiert und das Backend kann sie nicht erkennen

Ich glaube, Sie haben es nach dem Lesen gemeistert Der Fall in dieser Artikelmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So konfigurieren Sie Google Chrome für die Unterstützung von AJAX-Anfragen des Dateiprotokolls

So verwenden Sie PHP um Ajax-Übermittlungsdaten im Hintergrund zu empfangen

Das obige ist der detaillierte Inhalt vonAjax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!