关于springboot后端获取前端上传文件

 首先在yml配置文件路径:

files:
  upload:
    path: D:/spring+vue项目练习/File

//获得yml配置文件中的文件上传路径
    @Value("${files.upload.path}")
    private String  fileUploadPath;
    @Autowired
    IFileService fileService;
    //上传文件
    @PostMapping
    public String upload(@RequestParam MultipartFile file) throws IOException {
       //获得文件原始名称
        String originName=file.getOriginalFilename();
        //获得文件后缀
       String type= FileUtil.extName(originName);
       long size=file.getSize();
       //先存储到磁盘
        //父文件夹
        File uploadParentFile=new File(fileUploadPath);
        //不存在就先创建
        if(!uploadParentFile.exists()){
           uploadParentFile.mkdirs();
        }
        //定义文件唯一标识码
        String uuid= IdUtil.fastSimpleUUID();
        String fileUUID=uuid+ StrUtil.DOT +type;
        //父文件夹下面的文件
        File uploadFile =new File(fileUploadPath+fileUUID);
        //为了防止出现一个图片多次出现的问题,使用md5给文件赋予唯一标识
        String md5= SecureUtil.md5(file.getInputStream());
        //查数据库看是否有md5相同的文件,如果有,证明文件夹已经有相同图片,就不再储存进入磁盘,达到节约内存的作用
        //文件路径
        String url="";
        //查到url就用之前的,否则再赋值
        Files Files=getFileByMd5(md5);
        if(Files!=null)
        {
            url=Files.getUrl();
        }
        else
        {
            //把获取到的文件存储到磁盘目录
            file.transferTo(uploadFile);
            url="http://localhost:8080/file/"+fileUUID;
        }
        //写入数据库
        Files files=new Files();
        files.setName(originName);
        files.setType(type);
        files.setSize(size/1024);
        files.setMd5(md5);

        files.setUrl(url);
        fileService.save(files);
       return url;
    }

通过上面方法接收到上传的文件后,返回一个url表示当前文件的路径(不包括前面的local.../file/,这一段只是为了可以访问到下面的方法,所以下面接受到的uuid实际上只有上面的fileUUID)

然后下面通过get接受后,可以获得文件的uuid,通过文件uuid可以获得上传文件在磁盘的路径

//下载文件
    @GetMapping("/{fileUUID}")
    public void  download(@PathVariable String fileUUID, HttpServletResponse response) throws IOException {
         //根据唯一标识获得文件
         File uploadFile=new File(fileUploadPath+fileUUID);
         //设置输出流的格式
        ServletOutputStream os=response.getOutputStream();
        /*
        在 HTTP 场景中,第一个参数或者是 inline(默认值,表示回复中的消息体会以页面的一部分或者整个页面的形式展示),
        或者是 attachment(意味着消息体应该被下载到本地;大多数浏览器会呈现一个“保存为”的对话框,
        attachment后接 filename 的值预填为下载后的文件名,假如它存在的话)。
         */
        response.addHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileUUID,"UTF-8"));
       //告知浏览器这是一个字节流,浏览器处理默认字节流的方式是下载
        response.setContentType("application/octet-stream");
        //以上2行个人测试:同时注释2行那浏览器或者注释第二行把第一行的attachment和后面的filename=...换成inline不会下载图片,变成在浏览器直接展示图片,注释其中一个都会变成下载
       //读取文件的字节流
        os.write(FileUtil.readBytes(uploadFile));
        os.flush();
        os.close();
    }

 //通过md5查文件
    private Files getFileByMd5(String md5){
        LambdaQueryWrapper<Files>lambdaQueryWrapper=new LambdaQueryWrapper<>();
        lambdaQueryWrapper.eq(Files::getMd5,md5);
        List<Files> filesList=fileService.list(lambdaQueryWrapper);
        if(filesList.size()==0)return null;
        return filesList.get(0);
    }

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 前端使用HTML5的File API获取用户选择的图片,然后将图片转成二进制流,通过Ajax请求发送给后端后端使用阿里云OSS SDK,上传图片到OSS。具体步骤如下: 1. 引入阿里云OSS SDK依赖: ``` <dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>3.10.2</version> </dependency> ``` 2. 在Springboot配置文件中配置OSS相关参数: ``` oss.endpoint=oss-cn-hangzhou.aliyuncs.com oss.accessKeyId=your_access_key_id oss.accessKeySecret=your_access_key_secret oss.bucketName=your_bucket_name ``` 3. 在Controller中编写上传图片的接口: ``` @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { // 获取文件名 String fileName = file.getOriginalFilename(); // 上传到OSS OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret); ossClient.putObject(bucketName, fileName, file.getInputStream()); // 关闭OSS客户端 ossClient.shutdown(); // 返回图片URL return "https://" + bucketName + "." + endpoint + "/" + fileName; } ``` 4. 前端通过Ajax请求上传图片: ``` function uploadImage() { var file = document.getElementById("file").files[0]; var formData = new FormData(); formData.append("file", file); $.ajax({ url: "/upload", type: "POST", data: formData, processData: false, contentType: false, success: function(data) { console.log(data); } }); } ``` 需要注意的是,前端上传文件大小可能比较大,需要在后端进行文件大小和类型的校验,防止恶意攻击和服务器压力过大。 ### 回答2: 前端上传图片到Spring Boot后端,然后后端将图片上传到OSS(Object Storage Service)中。 首先,前端需要通过一个表单页面或者其他方式选择要上传的图片。当用户选择完成后,前端可以使用一个AJAX请求将图片发送给后端。 在后端,我们需要配置一个用于接收图片并上传到OSS的路由或API接口。这个接口需要处理用户上传的图片文件,并将其保存到本地的临时文件夹中。 然后,我们需要引入相应的OSS客户端库,比如阿里云的OSS SDK。在后端中,我们需要配置OSS的相关信息,比如Access Key ID(访问密钥ID)、Access Key Secret(访问密钥密码)、OSS域名等。 接下来,我们需要将保存在本地的临时文件上传到OSS。首先,我们需要创建一个OSSClient对象,使用OSSClient的构造函数传入配置的OSS相关信息。 然后,我们可以调用OSSClient对象的putObject方法来上传图片。在putObject方法中,我们需要指定要上传的目标Bucket(OSS存储空间),以及目标图片的存储路径和文件名。同时,我们也需要指定要上传文件的本地路径。 上传完成后,我们可以在OSS中看到上传的图片。 最后,在后端中,我们可以返回一个上传成功的消息或者其他相应的数据给前端,以表示图片上传到OSS的状态。 总结而言,前端上传图片到Spring Boot后端后端将图片上传到OSS步骤包括:前端选择图片并上传后端后端保存图片到本地临时文件夹,配置OSS并引入相关OSS客户端库,创建OSSClient对象并使用putObject方法将图片上传至OSS,返回上传成功的消息给前端

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值