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