vue和jQuery，实现简单的图片上传

css样式

        .upload-img-box {
            display: flex;
            flex-wrap: wrap;
        }

        .upload-img-box .upload-img-entity {
            width: 100px;
            min-width: 100px;
            height: 100px;
            min-height: 100px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            margin-top: 10px;
        }
        .upload-img-entity-border{
            border: 1px dashed black;
        }

        .upload-img-box .upload-img-entity img {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        .upload-img-box .upload-img-entity .upload-img-entity-del {
            width: 15px;
            height: 15px;
            position: absolute;
            z-index: 9;
            top: -5px;
            right: -5px;
            background: #EB695F;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .del-fork {
            display: inline-block;
            width: 13px;
            height: 3px;
            background: #ffffff;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
        }

        .del-fork:after {
            content: '/';
            display: block;
            width: 13px;
            height: 3px;
            background: #ffffff;
            -webkit-transform: rotate(-90deg);
        }

        .add-fork {
            display: inline-block;
            width: 40px;
            height: 7px;
            background: #BEBEBE;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
        }

        .add-fork:after {
            content: '/';
            display: block;
            width: 40px;
            height: 7px;
            background: #BEBEBE;
            -webkit-transform: rotate(-90deg);
        }

HTML代码

 <input style="display:none;" id="bill_pic" class="form-control valid" type="file"
                                        name="bill_pic" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                                        @change="uploadImgSelf('bill_pic')" />
                                    <div class="upload-img-box">
                                        <div v-for="(picEntity,index) in form.bill_pic" class="upload-img-entity">
                                            <img :src="picEntity" />
                                            <div class="upload-img-entity-del" @click="delUploadImg('bill_pic',index)">
                                                <div class="del-fork"></div>
                                            </div>
                                        </div>

                                        <div @click="uploadBtnClick()" class="upload-img-entity upload-img-entity-border">
                                            <div class="add-fork"></div>
                                        </div>

                                    </div>

vue内部定义方法

uploadImgSelf: function (uploadBtn) {
                        let that = this;
                        var formData = new FormData();
                        formData.append('file', $('#' + uploadBtn)[0].files[0]);  //添加图    片信息的参数
                        $.ajax({
                            url: '/common/upload/img?type=480',
                            type: 'POST',
                            cache: false, //上传文件不需要缓存
                            data: formData,
                            processData: false, // 告诉jQuery不要去处理发送的数据
                            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                            success: function (data) {
                                // var rs = eval("(" + data + ")");
                                if (data.success) {
                                    that.form[uploadBtn].push(data.file_path);
                                } else {
                                    toastr.error("上传失败", '失败');
                                }
                            },
                            error: function (data) {
                                tipTopShow("上传失败");
                            }
                        })
                    },
                    delUploadImg: function (uploadBtn, index) {
                        let that = this;
                        that.form[uploadBtn].splice(index, 1);
                    },
                    uploadBtnClick: function () {
                        $('#bill_pic').click();
                    }

效果图：