开发笔记：前端 blob 浏览器内存二进制文件对象 文件上传（vue+springboot）

前端 blob 浏览器内存二进制 文件对象

blob:http://localhost:8888/575e20ab-7ddc-49d8-8365-ef3afcaa307b

前端代码

function blobToFile(blob, fileName) {
  return new File([blob], fileName, { type: blob.type });
}

const scanPhoto = async (brand:string,category:string,imageUrl:string) => {
  const response = await fetch(imageUrl);
  const blob = await response.blob();
  const file = blobToFile(blob, 'tagImage.jpg');
  let formData = new FormData()
  formData.append("file", file)
  formData.append('brand', brand)
  formData.append('category', category)
  let standard: any = await scanTagApi(formData)
  console.log("standard", standard)

}



function blobToFile(blob:any, fileName:string) {
  return new File([blob], fileName, { type: blob.type });
}

scanTagApi

export const scanTagApi = (data:any) => {
    return http({
        method: 'POST',
        url: '/scan/scanTag',
        headers: {
            'Content-Type': 'multipart/form-data',
        },
        data
    })
}

后端代码

    @PostMapping("/scanTag")
    public CommonResult<ScanDto> scanTag(@RequestParam("file")MultipartFile file, String brand, String category) {
        return CommonResult.success(this.scanService.scanTag(file,brand,category));
    }