Ajaxに基づくformData画像とデータアップロード
最近はプロジェクトをしていますが、ユーザーデータとフォームアップロードの項目については、多くのピットに遭遇しました。白さん、皆さん、よろしくお願いします。
多いのは言わないで、直接コードに来てください。
1、アップロードコンポーネント
説明します。プロジェクトはvueフレームに基づいています。
2、次は写真のプレビューです。
3、核心部分、写真のアップロード
formData.appedに似ています。self.goodstyle);は、キーの値が正しい形式でデータを保存します。formData.apped(「file」、file.files[0],file.files[0].name);最初のパラメータは、サービス端末が受信したパラメータ名で、2番目はファイルオブジェクト、3番目のパラメータはファイル名で、複数のファイルをアレイとして追加することができます。
バックエンドはこのタイプのファイルを受信する時タイプは、MultiiprtFileタイプと指定されます。
特別な説明:
processData:false、
contentType:false、
この二つの句は必ず加えなければなりません。そうでないと、データは順序化され、バックエンドが認識できなくなります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
多いのは言わないで、直接コードに来てください。
1、アップロードコンポーネント
説明します。プロジェクトはvueフレームに基づいています。
<template>
<div class="newproduct">
<div class="topbox">
<div class="shopbox">
<img class="shopicon" src="../../assets/head.jpg">
<p class="shopname"> </p>
</div>
</div>
<div class="goodsbox">
<div class="startleft namebox">
<label class="title"> :</label><input class="noborder" v-model="goodsname" placeholder=" ">
</div>
<div 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>
</div>
<div class="startleft describebox">
<label class="title"> </label>
</div class="startleft">
<textarea class="describeinfo" v-model="goodsinfo"></textarea>
<div class="startleft">
<label class="title"> :</label>
<input class="noborder" placeholder=" " v-model="price">
</div>
<div class="startleft">
<label class="title"> :</label>
<input class="noborder" placeholder=" " v-model="number">
</div>
<div class="startleft">
<label class="title"> :</label>
<input class="noborder" placeholder=" " v-model="phone">
</div>
<div class="startleft">
<label class="title"> :</label>
<input class="noborder" placeholder=" " v-model="address">
</div>
<div class="startleft">
<label class="title"> </label>
<img src="">
<img src="">
</div>
<div class="addimg">
<div class="imgbox">
<img class="goodsimg" src="../../assets/addimg.png">
<input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
</div>
<div class="imgbox">
<img class="goodsimg" src="../../assets/addimg.png">
<input type="file" class="fileupload" accept="image/*" capture="camera" @change="viewimg()"/>
</div>
</div>
</div>
<div class="bottombox" :style="{'top':(height-12) + 'px'}">
<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>
</div>
<div class="fillbottom"></div>
</div>
</template>
説明すると、2つのアップロード画像のコンポーネントが含まれています。前の一つはマルチファイルモードで、つまり一回に複数の画像が選択できます。後はシングルファイルモードです。2、次は写真のプレビューです。
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、核心部分、写真のアップロード
/* 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);
}
}
});
}
説明:formData.appedに似ています。self.goodstyle);は、キーの値が正しい形式でデータを保存します。formData.apped(「file」、file.files[0],file.files[0].name);最初のパラメータは、サービス端末が受信したパラメータ名で、2番目はファイルオブジェクト、3番目のパラメータはファイル名で、複数のファイルをアレイとして追加することができます。
バックエンドはこのタイプのファイルを受信する時タイプは、MultiiprtFileタイプと指定されます。
特別な説明:
processData:false、
contentType:false、
この二つの句は必ず加えなければなりません。そうでないと、データは順序化され、バックエンドが認識できなくなります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。