vue 選擇圖片（限定大小）上傳到服務器

FormData：

 https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects 

成果：

 

html：

　　　　　　　　　<div class="pdt15 pdb15">
                    <div id="preview" class="preview" v-for="(Img, index) in files" :key="index">
                        <img src="./img/cross.png" alt="叉" class="delimg" @click="delimg(index)">
                        <img :src="Img.path" alt="" class="addimg">
                    </div>
                    <label for="browse" class="browse">
                        <input class="hidden" id="browse" type="file" accept="image/*" @change="previewFiles($event)" multiple>
                        <img src="./img/icon-photo.png" width="100" height="100" alt="照相機">
                    </label>
                </div>

js：

//上傳圖片
        previewFiles(e){
            let files = e.target.files
            for (let i = 0; i < files.length; i++) {
                if (files[i].size/1024/1024 > 2) { //限制每張上傳圖片的大小
                    alert('第'+(i+1)+'張圖片大於2M,請上傳小於2M的圖片');
                    return; 
                }
            }
            // console.log(files[0].size/1024/1024);
            let formData = new FormData();
            formData.append("action","upresumefile");//調用它的append()方法來添加字段
            for (let i = 0; i < files.length; i++) {
                formData.append("file[]",files[i]);
            }
17             this.$http.post('/API/app/infointerface.ashx',formData)
            .then((res) => {
                if (res.data.Result) {
                    this.files = this.files.concat(res.data.Data); //把服務器返回的圖片路徑獲取下來，在頁面顯示
                    // console.log(this.files);
                }
            })
        },
        //刪除圖片
        delimg(ind){
            this.files.splice(ind, 1);   
        },

 FormData對象用以將數據編譯成鍵值對，以便用XMLHttpRequest來發送數據。其主要用於發送表單數據，但亦可用於發送帶鍵數據(keyed data)

對於formData對象的簡單常見用法推薦看：https://blog.csdn.net/zqian1994/article/details/79635413