element-ui el-upload用 axios异步上传

用于存图片的信息
picture:{},


 //图片上传

            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file)
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            beforeUpload(picture){
            //2
            //当被调用后把照片信息放到 this.picture中
                this.picture =picture
                },

 summitForm: function (row) {
 
                  /**
                  1.
                  这个是为了提交el-upload的
                  当我们提交之前
                  beforeUpload(picture)就会被调用
                  :before-upload:上传文件之前的钩子，参数为上传的文件，若
                  返回 false 或者返回 Promise 且被 reject，则停止上传。
                  **/
                this.$refs.upload.submit();
                //3.
                var data =new FormData;
                data.append("gname",this.FormData.gname)
                data.append("goprice",this.FormData.goprice)
                data.append("grprice",this.FormData.grprice)
                data.append("gstore",this.FormData.gstore)
                data.append("goodType",this.FormData.goodType)
                data.append("gcontent",this.FormData.gcontent)
                data.append("picture",this.picture)
                var that = this
                // 'Content-Type' : 'application/json'

                axios({
                    method:"Post",
                    url:"/goodsTable",
                    headers: {
                    //请求头这个一定要写
                        'Content-Type': 'multipart/form-data',
                    },
                    data:data
                }).then(function (res) {
                    if (res.data.flag) {
                        that.visibleFlog = false
                        that.$message.success("添加成功")
                    } else {
                        that.$message.error(res.data.msg)
                    }
                }).catch(function (error){
                    console.log(error)
                }).finally(() => {
                    that.findAll()
                })
             

                       <el-upload
                       //action 随便写上一个你有的接口 
                       //否则这个会报错的
                            action="/goodsTable"
                            //不叫它自动上传
                            :auto-upload="false"
                            ref="upload"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :before-upload="beforeUpload">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    //为了回显照片用的
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

后端代码

@PostMapping
public Tools save(GoodsTable goodsTable,MultipartFile picture) throws IOException {

        log.info(goodsTable.toString());
        log.info(picture.getOriginalFilename());
        boolean save = goodsTableService.save(goodsTable,picture);
        return  new Tools(save);
    }