基於Ajax的formData圖片和資料上傳

漣動下漁舟發表於2017-05-18
ORM

最近做一個專案，關於使用者資料和表單上傳的專案，碰到了不少坑，這裡總結的分享給大家，希望能夠幫助大家。（小白，歡迎大家多交流）

多的就不說了，直接來程式碼吧！！

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>

說明，包含兩個上傳圖片的元件，前面一個有multiple為多檔案模式，即一次可選擇多張圖片，後面的是單檔案模式。

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.append(‘barterCategoryid’, _self.goodstype);
是一種鍵值對的形式儲存資料
而
formData.append(“file”, file.files[0], file.files[0].name);
第一個引數為服務端接收的引數名，第二個為檔案物件，第三引數為檔名稱，這樣可以將多個檔案新增為陣列的形式給伺服器

後端接收該型別的檔案時型別指定為：MultipartFile型別

特別說明：
processData: false,
contentType: false,
這兩句一定要加上，否則資料會被序列化，而導致後端不能識別

後端部分大家可以參考這裡：
http://blog.csdn.net/u013412790/article/details/72466600

相關文章