Base64文件上传到后台服务器

1. 引入axios

npm install axios

2. 前台输入

// 绑定@imgAdd event
    $imgAdd(pos, $file) {
      // 第一步.获取图片信息
      var formdata = new FormData();
      formdata.append('file', $file);
      console.log($file);
      // 存储图片信息
      // [0]base64数据 [1]文件名称
      let fileInfo = [];
      fileInfo[0]=$file.miniurl.split(',')[1];
      fileInfo[1]=$file._name;
      //图片上传服务器
      axios({
        url: process.env.VUE_APP_BASE_API + "/common/uploadBase64",
        method: 'post',
        data: fileInfo,
        headers: {
          Authorization: "Bearer " + getToken(),
        },
      }).then((res) => {
        console.log(res);
        
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        // $vm.$img2Url 详情见本页末尾
        this.$refs.md.$img2Url(pos, res.data.url);
      })
    },

3. Java后台加入依赖

<!--MockMultipartFile 依赖-->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-test</artifactId>
  <version>5.0.5.RELEASE</version>
</dependency>

4. 后台接收并转换后上传

/**
     * 通用上传base64文件请求（单个）
     * @param fileInfo [0]base64数据 [1]文件名称
     * @return
     */
    @PostMapping("/uploadBase64")
    public AjaxResult uploadFileBase64(@RequestBody String[] fileInfo)
    {
        try
        {
            // 解码Base64数据
            byte[] data = Base64.getDecoder().decode(fileInfo[0]);

            // 创建一个临时的MutlipartFile
            MultipartFile file = new MockMultipartFile("file", fileInfo[1], "image/png", data);

            // 上传文件路径
            String filePath = RuoYiConfig.getUploadPath();
            // 上传并返回新文件名称
            String fileName = FileUploadUtils.upload(filePath, file);
            String url = serverConfig.getUrl() + fileName;
            AjaxResult ajax = AjaxResult.success();
            ajax.put("url", url);
            ajax.put("fileName", fileName);
            ajax.put("newFileName", FileUtils.getName(fileName));
            ajax.put("originalFilename", file.getOriginalFilename());
            return ajax;
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return AjaxResult.error(e.getMessage());
        }
    }