Ajax-FormularDatenbild und Daten-Upload_AJAX bezogen

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. Komponente hochladen
Erklären Sie, dass das Projekt auf der

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

Frameworks

basiert, einschließlich zweier Hochgeladene Bilder Von den Komponenten verfügt die erste über mehrere, also den Mehrdateimodus, d. h. es können mehrere Bilder gleichzeitig ausgewählt werden, und die zweite über den 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 Hier. Die Situation eines Bildes

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(&#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);
      }
    }
  });
}

Anleitung:

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

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

Besondere Anweisungen:

processData: false ,
contentType: false,

muss hinzugefügt werden, sonst werden die Daten serialisiert und das Backend kann

nicht erkennen

Das obige ist der detaillierte Inhalt vonAjax-FormularDatenbild und Daten-Upload_AJAX bezogen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!