Not allowed to load local resource问题解决方案

遇到问题时间：2024-06-09

遇到该问题的原因：在做大事件项目的时，完善文件上传接口（文章封面图片和头像），由于资金不足（不想买阿里云哈哈哈哈哈哈）所以想着把上传后的文件存储到本地的磁盘当中，

以下是后端文件上传的代码：

@Service
public class UploadServiceImpl implements UploadService {
    @Override
   public Result upload(MultipartFile file){
        //获取文件名
        String originalFilename = file.getOriginalFilename();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        //通过UUID为文件添加唯一名称，防止重名导致文件覆盖
        String newFileName =UUID.randomUUID().toString().replace("-","")+suffix;
        try{

           file.transferTo(new File("D:\\trash\\uploadImg\\"+newFileName));
            return Result.success(""D:\\trash\\uploadImg\\"+newFileName");
       }
       catch (IOException e){
           e.printStackTrace();
       }
     return Result.success();
    }

}

在前端文件上传成功之后，发现上传后的照片并不会在前端回显，甚是苦恼。

在打开浏览器开发者工具后发现Not allowed to load local resource的异常，由于之前从未见过如此异常，所以在网上搜索了一下，原来产生这个异常的原因是为了安全问题浏览器不允许直接访问本地内存。

解决方案：

  后端提供了映射地址的方式，使本地的文件可以通过后端的url来映射访问

代码：

@Configuration
public class WebMvcConfiguration implements WebMvcConfigurer {
 
    @Value("${file.upload}")//在配置文件中定义的文件上传到本地磁盘的地址
    private String fileUpload;//定义的后端映射地址 此处纬 /file/**
    @Value("${file.path}")
    private String filePath;


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(filePath).addResourceLocations("file:///" + fileUpload);
    }
}

在编写完此配置文件之后，向前端返回一个映射的url，也就是：http://localhost:端口号/filePath/文件名字就可以完成图片的回显