Vue中如何使用ElementUI实现图片上传

<el-form-item prop="image" label="上传图片" v-model="form.image">
          <el-upload
            :action="'http://localhost:8080/files/upload'"
            list-type="picture-card"
            limit="1"
            :on-exceed="limitError"
            :on-success="imgSuccess"
            :on-error="imgError"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>

    // 上传成功
    imgSuccess(res, file) {
      this.imageUrl = res.data;
      this.form.image = this.imageUrl;
      console.log(res.data);
    },
    // 上传失败
    imgError(res) {
      this.$message({
        type: "error",
        message: "附件上传失败",
      });
    },
    // 上传数量超限
    limitError() {
      this.$message({
        type: "error",
        message: "图片仅可上传一张",
      });
    },

/**
     * 文件上传
     */
    @PostMapping("/upload")
    public Result upload(MultipartFile file) {
        if(file == null || file.isEmpty()) {
            return Result.error(400,"上传文件为空");
        }
        String flag;
        synchronized (FileController.class) {
            flag = System.currentTimeMillis() + "";
            ThreadUtil.sleep(1L);
        }
        String fileName = file.getOriginalFilename();
        try {
            if (!FileUtil.isDirectory(filePath)) {
                FileUtil.mkdir(filePath);
            }
            // 文件存储形式：时间戳-文件名
            FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);
            System.out.println(fileName + "--上传成功");
            System.out.println("文件上传地址"+filePath);
        } catch (Exception e) {
            System.err.println(fileName + "--文件上传失败");
            return Result.error(400,"文件上传失败");
        }
        String http = "http://" + ip + ":" + port + "/files/";
        return Result.success(http + flag + "-" + fileName);
    }