前端运用base64文件转为访问路径

最近在研究vue项目中使用pdf预览,因为要兼容IE11的问题最终使用pdfjs-dist插件来制作,
该插件是可以兼容IE但是因为后端返还我的是base64文件,所以需要做一些处理。
首先我运用的是拼接出dataURL的形式传递。但是因为IE11在解析base64文件时一些兼容问题,不支持直接传递dataURL的形式

`data:application/pdf;base64,返回的base64流`
这种格式在IE上有点问题

但是后端没有文件服务器所以不能给我直接返回访问路径,我这边经过一些处理将base64转换为文件访问路径,终于在IE也能访问到文件。

首先将base64拼接成上方的dataURL形式

const url=`data:application/pdf;base64,${baseFile}` //baseFile为base64
//然后通过下面的函数将dataURL转为Blob文件
export function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(",")
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}
const blobData=dataURLtoBlob(url)
const urld = window.URL.createObjectURL(new Blob([blobData]))

ok,这个urld就是最终得到的访问路径,通过这个urld就可以访问到文件。
最终感谢DuangDang大佬的文章让我可以解决转为blob文件这一步。

<think>嗯,我现在要设计一个Spring Boot接口来处理文件上传,参数是base64编码和文件名类型,然后返回文件获取路径。首先,我得想想怎么接收参数。用户是通过POST请求上传的,所以应该用@PostMapping注解。参数的话,base64字符串和文件名类型可以用一个DTO来接收,比如FileUploadRequest,里面有两个字段:base64Data和fileName。 接下来,处理base64数据。需要把base64字符串解码成字节数组。记得要处理可能的数据格式问题,比如去掉前缀,比如“data:image/png;base64,”这部分。可能需要用split方法分割一下,取后半部分真正的数据。然后使用Base64.getDecoder().decode()方法解码。 然后保存文件。保存路径的话,应该放在服务器的某个目录下,比如“uploads/”,这样可以配置在application.properties里,用@Value注入。文件名需要唯一,避免重复覆盖。可以用UUID生成唯一的文件名,然后加上原文件的扩展名。扩展名可以从fileName中提取,或者根据MIME类型判断,不过可能更复杂,这里可能直接用fileName中的后缀比较方便。 保存文件的时候,要确保目录存在,可以用Files.createDirectories()来创建目录。然后用FileOutputStream或者Files.write()把字节数组写入文件。 返回的路径应该是可以通过HTTP访问的,所以可能需要配置静态资源映射,或者通过另一个接口来提供文件访问。比如,在Spring Boot里配置资源处理器,把uploads目录映射到某个URL路径,比如“/files/”。这样返回的路径就可以是“http://localhost:8080/files/生成的文件名.扩展名”。 异常处理也很重要,比如base64解码失败、IO异常等,要用try-catch捕获,并返回合适的错误信息。可能还需要验证参数是否为空,文件名是否合法。 还有可能要考虑文件大小限制,在application.properties里配置spring.servlet.multipart.max-file-size和max-request-size,不过因为这里是base64传输,可能需要其他方式处理,或者直接限制输入的base64长度。 另外,文件存储的位置最好可配置,这样不同环境可以调整。返回的URL可能需要动态生成,根据当前服务器的地址,或者使用配置的基础路径。 安全方面,要防止路径遍历攻击,确保文件名不会包含../这样的路径。可以对文件名进行清理,比如使用StringUtils.cleanPath()方法。 可能还需要记录上传日志,或者添加权限验证,比如只有登录用户才能上传,但用户需求里没提到,可能暂时不用考虑。 总结步骤:接收DTO参数,解码base64,生成唯一文件名,保存到指定目录,配置静态资源访问,返回URL路径。处理异常和参数校验。</think>以下分步骤为您设计SpringBoot文件上传接口的实现方案: 一、接口设计 1. 请求方式:POST 2. 请求路径:/api/upload 3. 请求参数: ```json { "base64Data": "base64编码字符串", "fileName": "example.jpg" } ``` 4. 响应示例: ```json { "code": 200, "path": "http://your-domain.com/files/uuid_filename.jpg" } ``` 二、实现步骤 1. 创建DTO接收参数 ```java public class FileUploadRequest { private String base64Data; private String fileName; // getters & setters } ``` 2. 编写Controller层 ```java @PostMapping("/api/upload") public ResponseEntity<?> uploadFile(@RequestBody FileUploadRequest request) { try { String filePath = fileService.storeFile(request); return ResponseEntity.ok(Map.of("code", 200, "path", filePath)); } catch (Exception e) { return ResponseEntity.status(500).body(Map.of("code", 500, "error", e.getMessage())); } } ``` 三、文件存储实现(核心逻辑) 1. 配置文件存储路径(application.properties) ```properties file.upload-dir=uploads/ ``` 2. 文件服务实现 ```java @Service public class FileService { @Value("${file.upload-dir}") private String uploadDir; public String storeFile(FileUploadRequest request) throws IOException { // 验证数据有效性 if (request.getBase64Data() == null || request.getFileName() == null) { throw new IllegalArgumentException("参数不完整"); } // 解码Base64 byte[] fileBytes = Base64.getDecoder().decode( request.getBase64Data().split(",")[1] // 处理data:image/png;base64,前缀 ); // 生成唯一文件名 String fileExt = getFileExtension(request.getFileName()); String uniqueName = UUID.randomUUID() + "." + fileExt; // 创建存储路径 Path uploadPath = Paths.get(uploadDir).toAbsolutePath().normalize(); Files.createDirectories(uploadPath); // 保存文件 Path targetPath = uploadPath.resolve(uniqueName); Files.write(targetPath, fileBytes); // 返回访问路径(需配置静态资源映射) return "/files/" + uniqueName; } private String getFileExtension(String fileName) { return fileName.substring(fileName.lastIndexOf(".") + 1); } } ``` 四、配置静态资源访问 ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Value("${file.upload-dir}") private String uploadDir; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/files/**") .addResourceLocations("file:" + Paths.get(uploadDir).toAbsolutePath() + "/") .setCachePeriod(3600); } } ``` 五、注意事项 1. 安全增强 - 文件类型白名单验证(根据扩展名或MIME类型) - 文件大小限制(通过计算base64字符串长度判断) - 文件名消毒处理(防止路径穿越攻击) 2. 性能优化 - 异步处理大文件上传 - 分块上传支持 - 添加CDN地址前缀 3. 扩展建议 - 添加数据库记录存储文件元数据 - 集成OSS对象存储(如阿里云OSS) - 添加访问权限控制 完整流程说明: 1. 客户端将文件转为Base64格式 2. 携带文件名发送POST请求到接口 3. 服务端验证并解码数据 4. 生成唯一文件名并存储 5. 返回可通过HTTP直接访问的URL 补充说明: - Base64字符串建议在前端去除MIME前缀 - 实际生产环境建议使用独立文件服务器或云存储 - 大文件(超过10MB)建议采用分片上传方案
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值