Ajax-basiertes Formular, Datenbild und Daten-Upload

Dieser Artikel stellt hauptsächlich Ajax-basierte Formulardatenbilder und Daten-Upload-Informationen vor. Er hat einen gewissen Referenzwert.

Ich habe kürzlich an einem Projekt über das Benutzerprojekt gearbeitet Beim Hochladen von Daten und Formularen sind viele Fallstricke aufgetreten. Hier ist eine Zusammenfassung, die mit allen geteilt wird, 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

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

Beschreibung, einschließlich zweier Komponenten zum Hochladen von Bildern, die erste hat mehrere für mehrere Dateimodus, das heißt, es können mehrere Bilder gleichzeitig ausgewählt werden, gefolgt vom Einzeldateimodus.

2. Als nächstes folgt die Vorschau des 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]);
    }
  }
}

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

3. Kernteil, Bild-Upload

Beschreibung:

Ä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); , 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

Das Obige habe ich für alle zusammengestellt . Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie den Verlauf, um das Problem zu lösen, dass Ajax Vorwärts/Rückwärts/Aktualisieren nicht unterstützt (grafisches Tutorial)

Ajax-Erkennungsmethode für Website-Hijacking

Native JS implementiert domänenübergreifende Ajax-Request-Flask-Antwortinhalte (grafisches Tutorial)

Das obige ist der detaillierte Inhalt vonAjax-basiertes Formular, Datenbild und Daten-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!