前端上传图片到后端，含预览删除

前端上传图片，通过base64进行传递文件，直接上代码：
前端：

<el-dialog :visible.sync="assetPositionModuleShow">
            <div class="flex-img">
                <div class="el-upload-list el-upload-list--picture-card" v-show="hideShow">
                    <div class="el-upload-list__item is-success">
                        <img class="flex-img__image" :src="imageUrl">
                        <label class="el-upload-list__item-status-label">
                            <i class="el-icon-upload-success el-icon-check"></i>
						 </label>
                        <span class="el-upload-list__item-actions">
                          <span
                                  @click="handlePicturePreview()"
                          >
                      <i class="el-icon-zoom-in"></i>
                    </span>
					 <span class="el-upload-list__item-delete" v-show="disabledBoolean ? false:true">
                        <i class="el-icon-delete" @click.stop="handleRemove()"></i>
                    </span>
                </span>
                    </div>
                </div>
				<el-upload
                        class="image-uploader"
                        :show-file-list="false"
                        action=""
                        :on-change="getFile"
                        v-show="!hideShow">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="imageUrl" alt="">
                </el-dialog>
				<div style="margin-left: 20px;: ">
                    <el-button style="margin-top: 10px;" size="small" type="success" @click="submitPicture">开始核对</el-button>
                </div>
            </div>
</el-dialog>

var vm = new Vue({
    el: '#app',
    data(){
        return {
 			imgBase64: '',
            fileName: '',
            imageUrl: "",
            file: this.imageUrl ? this.imageUrl : '',
            imageForm: "",//给父组件传值
            dialogVisible: false,//控制大图预览
            }
        }
	props: {
	        disabledBoolean: {//父组件传过来是编辑，还是查看
	            type: Boolean,
	            default() {
	                return false;
	            }
	        },
	    },
	  watch: {
        imageUrl(value) {
            this.file = value
        },
        imageForm(value) {//当照片地址改变的时候，给父组件传值
            const list = value;
            this.$emit('updateImage', list);
        }
    },
    computed: {
        hideShow() {//当图片多于一张的时候，就隐藏上传框
            return this.file === '' ? false : true
        }
    },
	methods: {
		handlePicturePreview() {
            this.dialogVisible = true;
        },
//删除照片是清空所有
        handleRemove() {
            this.file = '';
            this.imageUrl = "";
            this.imageForm = "";
        },
        getFile(file, fileList) {
            this.imageUrl = URL.createObjectURL(file.raw);
            this.getBase64(file.raw).then(res => {
                this.imgBase64 = res;
            })
        },
		 getBase64(file) {
            return new Promise(function (resolve, reject) {
                const reader = new FileReader()
                let imgResult = ''
                reader.readAsDataURL(file)
                reader.onload = function () {
                    imgResult = reader.result
                }
                reader.onerror = function (error) {
                    reject(error)
                }
                reader.onloadend = function () {
                     resolve(imgResult)
                }
               })
        },
         submitPicture() {
            if(""==this.imgBase64){
                this.$message({
                    type: 'error',
                    message: "请先上传图片",
                    duration: 2000
                })
                return;
            }

            var json={
                "imgBase64":this.imgBase64,
                "serialCode":this.assetInfo.serialCode,
            }
			 req("post", "/sys/assetQRCode/uploadPicture" ,JSON.stringify(json)).then((res) => {
                if (res.code === "0") {
                    //数据赋值
                }else{
                	//异常处理
                    this.$message({
                        type: 'error',
                        message: res.msg,
                        duration: 2000
                    })
                }
            })
        },
	}

后端接收

  @ResponseBody
    @PostMapping("/uploadPicture")
    public R compareAssetPositionInfo(@RequestBody JSONObject request) {
        String imgBase64 = (String) request.get("imgBase64");
        String serialCode = (String) request.get("serialCode");
        AssetPositionCompareResDto resDto = assetStocktakeManager.compareAssetPositionInfo(imgBase64, serialCode);
         return R.ok().put("data", resDto);

最终效果