使用jquery的ajax上传图片

vue js

changeImage(e) {
                // 上传图片事件
                var files = this.$refs.avatarInput.files;
                var that = this;
                function readAndPreview(file) {
                    //Make sure `file.name` matches our extensions criteria
                    if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            if (that.imgDatas.indexOf(this.result) === -1) {
                                that.imgDatas.push(this.result);
                                let form = new FormData();
                                form.append('file[]',file);
                                $.ajax({
                                    type:'post',
                                    url:'/test/upload',
                                    data:form,
                                    dataType:"json",
                                    cache:false,
                                    processData:false,
                                    contentType:false,
                                    success(res){
                                        console.log(res)
                                    }
                                })
                            }
                        };
                        reader.readAsDataURL(file);
                    }
                }
                if (files) {
                    [].forEach.call(files, readAndPreview);
                }
                if (files.length === 0) {
                    return;
                }

            },
            upLoad() {
                // 触发上传图片按钮
                this.$refs.avatarInput.dispatchEvent(new MouseEvent("click"));
            }

html

<input type="file" accept="image/*" @change="changeImage($event)" ref="avatarInput" style="display:none">
        <div class="pic_list_box">
            <div class="pic_list" v-show="imgDatas.length">
                <div v-for="(src,index) in imgDatas" :key="index">
                    <img :src="src" width="80" height="80" alt srcset>
                </div>
            </div>
            <img class="upload_btn" v-show="imgDatas.length!=3" @click="upLoad" src="/images/plus.png" alt>
        </div>

css

.pic_list_box {
        display: flex;}

    .upload_btn {
        width: 80px;
        height: 80px;
        padding-left: 15px;
    }

    .pic_list {
        display: flex;
    }

    img {
        width: 80px;
        height: 80px;
        padding-left: 15px;
        padding-bottom: 10px;
    }