当前位置: 首页 > news >正文

SpringBoot+OSS文件(图片))上传

SpringBoot整合OSS实现文件上传

以前,文件上传到本地(服务器,磁盘),文件多,大,会影响服务器性能

如何解决? 使用文件服务器单独存储这些文件,例如商业版–>七牛云存储,阿里云OSS,腾讯云cos等等

也可以自己搭建文件服务器(FastDFS,minio)

0 过程中需要实名认证

1 开通阿里云OSS

image-20240719152009607

2 创建bucket

image-20240719152243439

其他不用管,直接完成即可

3 获取AccessKeyId、AccessKeySecret

image-20240719152336136

image-20240719152737253

墙裂建议,保存好此文件,因为后续无法再查看,只能删除重建

4 获取外网访问域名

image-20240719153351723

Endpoint(地域节点): xxxxx

Bucket 域名 : xxxxx

5 创建文件夹

image-20240719153550710

oss中存储在app/upload下

6 添加依赖

  		<!-- 阿里云OSS--><dependency><groupId>com.aliyun.oss</groupId><artifactId>aliyun-sdk-oss</artifactId><version>3.10.2</version></dependency><dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency>

7 封装常量类

根据自己实际情况改变

public class AliyunOSSConstants {// OSS唯一keypublic static final String ASSCESS_KEY_ID = "你的ASSCESS_KEY_ID";// OSS唯一key秘钥public static final String ASSCESS_KEY_SECRET = "你的ASSCESS_KEY_SECRET";// 地域节点public static final String END_POINT = "你的地域节点";// Bucket名称public static final String BUCKET_NAME = "你的Bucket名称";// 文件一级路径public static final String FILE_DIR = "oss中创建的文件路径";// 文件访问域名public static final String COMMON_URL = "这个是后续访问的公共路径前缀";}

8 封装工具类

package com.qf.util;import com.aliyun.oss.ClientException;
import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.OSSException;
import com.aliyun.oss.model.CannedAccessControlList;
import com.aliyun.oss.model.CreateBucketRequest;
import com.aliyun.oss.model.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;/*** --- 天道酬勤 ---** @author QiuShiju* @date 2024/12/08* @desc*/
public class AliyunOSSUtil {/*** 上传文件*/public static String upLoad(MultipartFile file) {System.out.println("------OSS文件上传开始--------" );String endPoint = AliyunOSSConstants.END_POINT;String accessKeyId = AliyunOSSConstants.ASSCESS_KEY_ID;String accessKeySecret = AliyunOSSConstants.ASSCESS_KEY_SECRET;String bucketName = AliyunOSSConstants.BUCKET_NAME;String fileDir = AliyunOSSConstants.FILE_DIR;SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");String dateStr = format.format(new Date( ));String fileUrl = null;OSS client = new OSSClientBuilder( ).build(endPoint, accessKeyId, accessKeySecret);try {// 判断容器是否存在,不存在就创建if (!client.doesBucketExist(bucketName)) {client.createBucket(bucketName);CreateBucketRequest createBucketRequest = new CreateBucketRequest(bucketName);createBucketRequest.setCannedACL(CannedAccessControlList.PublicRead);client.createBucket(createBucketRequest);}String originalFilename = file.getOriginalFilename( );String suffix = originalFilename.substring(originalFilename.indexOf("."));// 设置文件路径和名称fileUrl = fileDir + "/" + (dateStr + "/" + UUID.randomUUID( ).toString( ).replace("-", "") + suffix);System.out.println("fileUrl:" + fileUrl);// 上传文件PutObjectResult result = client.putObject(new PutObjectRequest(bucketName, fileUrl, file.getInputStream( )));// 设置权限(公开读)client.setBucketAcl(bucketName, CannedAccessControlList.PublicRead);if (result != null) {System.out.println("resp:" + result);System.out.println("------OSS文件上传成功------" + AliyunOSSConstants.COMMON_URL + fileUrl);}} catch (OSSException oe) {oe.printStackTrace();} catch (ClientException ce) {ce.printStackTrace();} catch (IOException e) {e.printStackTrace( );} finally {if (client != null) {client.shutdown( );}}return AliyunOSSConstants.COMMON_URL + fileUrl;}/*** 删除文件*/public static String delete(String fileUrl) {System.out.println("------OSS文件删除开始--------" + fileUrl);String endPoint = AliyunOSSConstants.END_POINT;String accessKeyId = AliyunOSSConstants.ASSCESS_KEY_ID;String accessKeySecret = AliyunOSSConstants.ASSCESS_KEY_SECRET;String bucketName = AliyunOSSConstants.BUCKET_NAME;OSS client = new OSSClientBuilder( ).build(endPoint, accessKeyId, accessKeySecret);try {client.deleteObject(bucketName, fileUrl);System.out.println("------OSS文件删除成功------" + AliyunOSSConstants.COMMON_URL + fileUrl);} catch (OSSException oe) {oe.printStackTrace();} catch (ClientException ce) {ce.printStackTrace();} finally {if (client != null) {client.shutdown( );}}return AliyunOSSConstants.COMMON_URL + fileUrl;}
}

9 接口测试

@RestController
public class UploadController {/*** 演示上传文件到OSS*/@PostMapping("/upload")public R upload(MultipartFile file){String filePath = AliyunOSSUtil.upLoad(file);return R.ok(filePath);}}

10 前端

<template><div><h2>文件上传</h2><!--:http-request="uploadFile"  是用来覆盖默认的action的请求路径的action=""不能删除,因为是<el-upload>组件必填参数,不填会报错-->  <el-uploadclass="upload-demo"dragaction="":http-request="uploadFile"  :on-change="handleChange"multiple><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></el-upload><div><!-- 上传后展现图片的地方 -->  <img :src="fileSrc" width="200px"></div></div></template><script>
import {uploadPicture} from '@/api/upload'
export default {data(){return{file:null,fileSrc:null}},methods:{handleChange(file){this.file = file.raw;},uploadFile(){const file = this.file;// FormData是js对象,用于存储表单数据  const formData = new FormData();formData.append("file", file); // 由后端接口决定,后端参数叫fileuploadPicture(formData).then((res) => {this.$message({message: "上传成功",type: "success",});this.fileSrc = res.dataconsole.log("fileSrc",this.fileSrc)});}}
}
</script><style scoped lang="scss"></style>

使用:http-request指定文件上传的函数,原有的action、:before-upload、:on-success等不起作用。但删去action可能有报错,所以还是写了action=“”。

uploadPicture()是封装的函数,在upload.js中

import request from '@/utils/request'export function uploadPicture(data) {return request({url: '/upload',method: 'post',data})
}

11 测试即可

image-20240719162138204

12. 后续,需要改造后端

现在只是上传成功

还需要将上传好的图片地址存储到数据库,后续查询时查出地址,在前端展现

提示: 数据库存储图片地址时不要太长,可以只存储重要信息. 公共部分可以等从数据库查询出后再拼接展现给前端

image-20241204104005570

http://www.lryc.cn/news/500809.html

相关文章:

  • docker镜像构建企业级示例
  • 【源码】Sharding-JDBC源码分析之SQL中读写分离动态策略、数据库发现规则及DatabaseDiscoverySQLRouter路由的原理
  • Spark 之 partitons
  • 使用Zerotier配置虚拟局域网,踏坑
  • 【优选算法 二分查找】二分查找算法模板详解:二分查找 & 在排序数组中查找元素的第一个和最后一个位置
  • gitlab 生成并设置 ssh key
  • 计算机视觉在科学研究(数字化)中的实际应用
  • 移动应用开发课程第六次实验:为实验2添加登陆页面,用SQList存储好友基本信息
  • nextjs增加系统路径前缀(basePath)适配方案
  • 嵌入式蓝桥杯学习拓展 LCD翻转显示
  • 学习threejs,实现配合使用WebWorker
  • TDengine 新功能 复合主键
  • JVM 面试题
  • 组件上传图片不回显问题
  • 【JavaWeb后端学习笔记】Spring AOP面向切面编程
  • 6.584-Lab5B
  • OceanBase 的探索与实践
  • 安卓调试环境搭建
  • 动画Lottie
  • C++感受14-Hello Object 封装版 - 上
  • 网络安全中大数据和人工智能应用实践
  • RISC-V架构下OP-TEE 安全系统实践
  • 40分钟学 Go 语言高并发:【实战】分布式缓存系统
  • [创业之路-186]:《华为战略管理法-DSTE实战体系》-1-为什么UTStarcom死了,华为却活了,而且越活越好?
  • python如何多行注释
  • 前端工程化面试题目常见
  • 定点数的乘除运算
  • 页面置换算法模拟 最近最久未使用(LRU)算法
  • Ubuntu与Centos系统有何区别?
  • RK3568平台开发系列讲解(pinctrl 子系统篇)pinctrl_debug