1.背景

 1. 后台：基于springBoot

2. 前端：vue 和 vant

2.区别

1.base64文件上传，传的数据会比传统的文件上传大

2.base64 就是传一个超大的字符串，可能会吃掉很大的内存

3.减少http请求

3.base64上传

1. 设置http请求的大小
server:
  tomcat:
    max-http-post-size: 64MB # 修复base64文件上传

2.前端代码

 updatePics (files) {
      let fileArray = []
      if (files instanceof Array) { //  兼容单个图片
        fileArray = files
      } else {
        fileArray.push(files)
      }
      this.filesShow.push(...fileArray) // 数组拼接
      let params = new FormData() // 创建form对象
      for (let i = 0; i < fileArray.length; i++) {
        let fileObj = fileArray[i].file
        params.append('file', fileObj) // 表单提交多个file
      }
      this.$http({ // 这边我自己封装的请求，你可以换成使用的axios请求
        url: this.$http.adornUrl('/sys/file/uploadFile'),
        method: 'post',
        data: params
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.fileIds.push(...data.data.fileIds)
          this.filePaths.push(...data.data.filePaths)
        } else {
          this.$toast(data.msg)
        }
      })
    }

3.后端代码 

  @PostMapping("/upByBase64")
    public R upByBase64(@RequestParam("contents") List<String> contents,
                        @RequestParam(value = "names",required = false) List<String> names)  {

        MultipartFile[] multipartFiles = new MultipartFile[names.size()];
        for (int i = 0,j=0; i < names.size() ; i++,j = j + 2){ //为了处理base64 传的content值会被分割成2个这里把它合起来
            String content = contents.get(j)+ "," + contents.get(j+1);
            BASE64DecodedMultipartFile file = (BASE64DecodedMultipartFile) MultipartFileUtils.base64ToMultipart(content,names.get(i));
            multipartFiles[i] = file;
        }
        return R.ok().put("data",mFilesService.uploadFiles(multipartFiles));
    }

4.用到的工具类[自选] base64 将字符串转换成MultipartFile
public class MultipartFileUtils {

    public static MultipartFile base64ToMultipart(String base64,String name) {
        try {
            String[] baseStrs = base64.split(",");

            BASE64Decoder decoder = new BASE64Decoder();
            byte[] b = new byte[0];
            b = decoder.decodeBuffer(baseStrs[1]);

            for(int i = 0; i < b.length; ++i) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            return new BASE64DecodedMultipartFile(b, baseStrs[0],name);
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }


}

4. 流文件上传

准备：
  
 <van-uploader multiple :before-read="beforePics"  :after-read="updatePics"   :max-count="9" />

1. 前端
    updatePics (files) { //前端选择的是vant 的上传组件
      let fileArray = []
      if (files instanceof Array) { //  兼容单个图片
        fileArray = files
      } else {
        fileArray.push(files)
      }
      this.filesShow.push(...fileArray) // 数组拼接
      let params = new FormData() // 创建form对象
      for (let i = 0; i < fileArray.length; i++) {
        let fileObj = fileArray[i].file
        params.append('file', fileObj) // 表单提交多个file
      }
      this.$http({
        url: this.$http.adornUrl('/sys/file/uploadFile'),
        method: 'post',
        data: params
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.fileIds.push(...data.data.fileIds)
          this.filePaths.push(...data.data.filePaths)
        } else {
          this.$toast(data.msg)
        }
      })
    }

2.后端

   @PostMapping("/uploadFile")
    public R uploadFile(@RequestParam("file") MultipartFile[] files) {
        return R.ok().put("data",mFilesService.uploadFiles(files));
    }