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>    
    </p>
<p>
       </p>
<p>     
        <img  class="shopicon lazy" src="/static/imghwm/default1.png" data-src="../../assets/head.jpg" alt="Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung" >
        </p>
<p>开心就好的小店</p>
      
    
    <p>
      </p>
<p>
        <label>商品名称：</label><input>
      </p>
      <p>
        <label>商品类型：</label>
        <select>
          <option>请选择</option>
          <option>图书</option>
          <option>卡券</option>
          <option>服装</option>
          <option>礼品</option>
          <option>运动装备</option>
          <option>电子设备</option>
          <option>日用百货</option>
          <option>其他</option>
        </select>
      </p>      
      <p>
        <label>商品描述</label>       
      </p> class="startleft">
       <textarea></textarea>
      <p>
        <label>单价:</label>
        <input>
      </p>
      <p>
        <label>数量:</label>
        <input>
      </p>
      <p>
        <label>联系电话:</label>
        <input>
      </p>
      <p>
        <label>地址:</label>
        <input>
      </p>
      <p>
        <label>图片</label>
        <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung" >
        <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung" >      
      </p>      
      <p>
        </p>
<p>
          <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung" >
          <input>
        </p>
        <p>
          <img  class="goodsimg lazy" src="/static/imghwm/default1.png" data-src="../../assets/addimg.png" alt="Ajax-basierte formData-Bild- und Daten-Upload-Rue-Implementierung" >
          <input>
        </p> 
      
    
    <p>
      </p>
<ul>
        <li>首页</li>
        <li>返回货架</li>
        <li>放弃编辑</li>
        <li>上架</li>
      </ul>
    
    <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 Anleitung: <p style="text-align: left;"><strong></strong>Ä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. </p><p style="text-align: left;">Wenn das Backend diesen Dateityp empfängt, wird der Typ wie folgt angegeben: MultipartFile-Typ </p><p style="text-align: left;"></p>Besondere Anweisungen: <p style="text-align: left;"><strong></strong></p>processData: false , <p style="text-align: left;">contentType: false, <span style="color: #800000"><br></span>Diese beiden Sätze müssen hinzugefügt werden, sonst werden die Daten serialisiert und das Backend kann sie nicht erkennen</p><p style="text-align: left;">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! </p><p>Empfohlene Lektüre: </p><p></p>So konfigurieren Sie Google Chrome für die Unterstützung von AJAX-Anfragen des Dateiprotokolls<p><a href="http://www.php.cn/js-tutorial-391081.html" target="_blank"></a><br></p>So verwenden Sie PHP um Ajax-Übermittlungsdaten im Hintergrund zu empfangen<p><a href="http://www.php.cn/js-tutorial-391075.html" target="_blank"></a></p>

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!