前端、后端上传文件到OSS,简明记录

本文详细描述了如何通过后端和前端两种方式将文件上传到阿里云OSS,包括后端使用MavenSDK、前端通过Ajax请求获取并利用临时凭证进行安全上传的过程,以及如何配置环境变量以保证安全性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

后端上传文件到OSS,前端通过临时凭证上传以及通过临时凭证访问OSS资源,简明记录

上传文件到oss的方式:

**后端上传:**文件先要从页面上传到后端存起来,再通过后端发送到oss,然后后端将存起来的文件删除(当然可以不删)。

**前端上传:**文件通过前端页面直接上传到OSS服务器,不需要传到后端服务器,但是要先从后端获取上传OSS的凭证,然后再上传到OSS。

后端上传

后端上传的方式,官网有现成的sdk,非常简单,导入依赖后,对着代码传送你要上传的文件到后端即可

添加maven依赖

        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.1</version>
        </dependency>

复制下面代码到JUnit中执行了一下,更改对应的endpoint、bucketName等参数,即可执行文件上传到oss,不过对应的accessKey、accessKeySecret参数都存放在环境变量中,这也是阿里云推荐这么操作,为了安全起见以及代码与配置分离。当然你也可以直接在代码中或properties、yml文件中配置。

@Test
    public void testOSSUpload() throws com.aliyuncs.exceptions.ClientException {
        // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
        String endpoint = "https://oss-cn-nanjing.aliyuncs.com";
        
        // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
        EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
        // 填写Bucket名称,例如examplebucket。
        String bucketName = "othersitefiles";
        
        // 填写Object完整路径,例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
        String objectName = "exampledir/exampleobject.jpg";

        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endpoint, credentialsProvider);

        try {
            File file = new File("D:\\Bruce\\dog.jpg");

            ByteArrayOutputStream bos = new ByteArrayOutputStream();
            try (InputStream is = new FileInputStream(file)) {
                byte[] buffer = new byte[1024];
                int readCount;
                while ((readCount = is.read(buffer)) != -1) {
                    bos.write(buffer, 0, readCount);
                }
            } catch (FileNotFoundException e) {
                throw new RuntimeException(e);
            } catch (IOException e) {
                throw new RuntimeException(e);
            }

            ossClient.putObject(bucketName, objectName, new ByteArrayInputStream(bos.toByteArray()));
        } catch (OSSException oe) {
            System.out.println("Caught an OSSException, which means your request made it to OSS, "
                    + "but was rejected with an error response for some reason.");
            System.out.println("Error Message:" + oe.getErrorMessage());
            System.out.println("Error Code:" + oe.getErrorCode());
            System.out.println("Request ID:" + oe.getRequestId());
            System.out.println("Host ID:" + oe.getHostId());
        } catch (ClientException ce) {
            System.out.println("Caught an ClientException, which means the client encountered "
                    + "a serious internal problem while trying to communicate with OSS, "
                    + "such as not being able to access the network.");
            System.out.println("Error Message:" + ce.getMessage());
        }  finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }
    }

因为是在idea中执行的JUnit测试上传,所以环境变量需要再ide中配置。

image-20240401172119410

image-20240401172213302

如果是在idea中运行web项目测试,则可以在ide中配置环境变量,也可以在系统环境变量中进行配置,如果两者都设置了,则优先会从ide中获取配置。

而如果是发布以后的web项目,则就必须在系统环境变量中去设置。

image-20240401172655418

image-20240401172722147


前端上传:

既然要上传到oss,其实就不用上传后端,最好是由前端安全的把文件传到oss,这种操作最为合理。

这时候需要先到阿里云去配置账户与角色

image-20240401173106764

image-20240401173149755

image-20240401173239380

image-20240401173414993

在这里可以得到你新建账户的accessKeyaccessSecret,然后给这个用户添加权限

image-20240401173542192

image-20240402000609315

然后再新增角色

image-20240401173731574

image-20240401173745059

image-20240401173805942

image-20240401173849002

image-20240401173904834

image-20240401173926755

为角色也添加权限后,找到AEN的值,在代码中会用到

image-20240401174031115

后端代码:

service:

这里基本把参数都配置到环境变量中了

@Service("fileUploadOSSService")
public class FileUploadOSSServiceImpl implements FileUploadService {

    private Logger logger = LoggerFactory.getLogger(FileUploadOSSServiceImpl.class);

    @Override
    public R getToken(@CurrentUserPC UsersVO usersVO) {
        try {
            EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();

            String region = System.getenv("REGION");
            String rolearn = System.getenv("ROLEARN");

            // 初始化默认profile,填入您的AK信息
            DefaultProfile profile = DefaultProfile.getProfile(
                    region, credentialsProvider.getCredentials().getAccessKeyId(), credentialsProvider.getCredentials().getSecretAccessKey());

            // 创建DefaultAcsClient实例并初始化
            IAcsClient client = new DefaultAcsClient(profile);

            // 创建AssumeRoleRequest请求对象
            AssumeRoleRequest request = new AssumeRoleRequest();

            request.setRoleArn(rolearn);
            request.setRoleSessionName("MySession");
            // 可选设置会话持续时间,默认为900秒
            request.setDurationSeconds(900L);

            // 发起请求并获取响应
            AssumeRoleResponse response = client.getAcsResponse(request);

            // 解析并打印临时凭证信息
            String accessKeyId = response.getCredentials().getAccessKeyId();
            String accessKeySecret = response.getCredentials().getAccessKeySecret();
            String securityToken = response.getCredentials().getSecurityToken();
            String endpoint = System.getenv("OSS_ENDPOINT");
            String bucket = System.getenv("BUCKET");

            System.out.println("临时AccessKeyId: " + accessKeyId);
            System.out.println("临时AccessKeySecret: " + accessKeySecret);
            System.out.println("临时SecurityToken: " + securityToken);

            OSSVO ossVO = new OSSVO();
            ossVO.setAccessKeyId(accessKeyId);
            ossVO.setAccessKeySecret(accessKeySecret);
            ossVO.setSecurityToken(securityToken);
            ossVO.setEndpoint(endpoint);
            ossVO.setExpiration(response.getCredentials().getExpiration());
            ossVO.setBucketName(bucket);
            ossVO.setRegion(region);

            ossVO.setFileName(RandomUtils.getUUID() + System.currentTimeMillis() + usersVO.getUid());

            return R.ok().put("data", ossVO);
        } catch (ClientException e) {
            e.printStackTrace();
            logger.error("获取token失败,com.aliyun.oss.ClientException:", e);
        } catch (ServerException e) {
            e.printStackTrace();
            logger.error("获取token失败,ClientException:", e);
        } catch (com.aliyuncs.exceptions.ClientException e) {
            e.printStackTrace();
            logger.error("获取token失败,com.aliyuncs.exceptions.ClientException:", e);
        }
        return R.error("获取token失败");
    }

}

image-20240402001642443

BUCKET为Bucket名称
image-20240402001824721

OSS_ACCESS_KEY_ID与OSS_ACCESS_KEY_SECRET则是刚才创建RAM用户的AccessKey ID与 Accesskey Secret

image-20240402002050534

OSS_ENDPOINT为Endpoint

image-20240402002306488

ROLEARN就是在角色那里的ARN值

image-20240402002923551

OSS_SESSION_TOKEN不用管,REGION为地区,一般就是Endpoint中的地区,按理我这里应该对应是cn-nanjing,但是查了下对照表,cn-nanjing的对应REGION应该是cn-hangzhou,所以我这里填的是cn-hangzhou

image-20240402002532426

目前阿里云在中国大陆地区的regionId主要有:

  • cn-hangzhou
  • cn-beijing
  • cn-shanghai
  • cn-qingdao
  • cn-zhangjiakou
  • cn-huhehaote
  • cn-shenzhen
  • cn-chengdu
  • cn-hongkong
  • cn-hangzhou-internal

根据阿里云的官方文档,南京节点(Nanjing)并未单独作为一个regionId列出,而是作为华东2(Hangzhou)的一部分。所以,如果在南京节点使用OSS服务,应该使用cn-hangzhou作为regionId。

controller:
@Api("文件上传")
@RestController
@RequestMapping("/pcApi/fileUpload")
public class FileUploadController {

    @Autowired
    @Qualifier("fileUploadOSSService")
    private FileUploadService fileUploadOSSService;

    @ApiOperation("获取OSS token")
    @PostMapping("/getOSSToken")
    public R getOSSToken(@CurrentUserPC UsersVO usersVO) {
        return fileUploadOSSService.getToken(usersVO);
    }

}

前端代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- HTML部分 -->
			<input type="file" id="fileInput" accept="image/*" ref="fileInput" @change="uploadFile" />
		</div>
	</body>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script src="node_modules/ali-oss/dist/aliyun-oss-sdk.min.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			data: {

			},
			created() {

			},
			methods: {
				uploadFile(event) {
					const file = event.target.files[0];
					// 获取文件后缀名
					var fileExtension = file.name.substring(file.name.lastIndexOf('.') + 1);
				
					// 转换为小写以便不区分大小写比较
					fileExtension = fileExtension.toLowerCase();
					
					debugger;
					// 确保文件已选择
					if (file) {
						// 上传文件的逻辑
						const token =
							"eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjp7InVpZCI6MiwidXNlcm5hbWUiOiJ6aGFuZ2RpIiwidHlwZSI6MX19._ADwwEioEnyV7L_xqPjWZgeR_13ow5uDU01Togtr90I"; // 根据实际情况从存储中获取token
						// 前端请求后端获取临时凭证
						$.ajax({
							url: "http://localhost:8099/pcApi/fileUpload/getOSSToken",
							dataType: "json",
							method: "POST",
							headers: {
								"token": token
							},
							success: function(data) {
								
								if (data.code == 0) {
									console.log(data.data);
									const credentials = data.data;

									// 初始化OSS客户端
									const client = new OSS({
										region: credentials.region,
										accessKeyId: credentials.accessKeyId,
										accessKeySecret: credentials.accessKeySecret,
										bucket: credentials.bucketName,
										stsToken: credentials.securityToken,
										endpoint: credentials.endpoint, // 使用STS提供的Endpoint
										refreshSTSToken: this.getNewSTSToken,
										refreshSTSTokenInterval: 300000, // 设置STS Token刷新间隔,单位是毫秒,默认值是300000(即5分钟)
									});

									// 开始上传文件
									try {
										const result = client.put('weiqingview/'+credentials.fileName + '.' + fileExtension, file);
										debugger;
										console.log('Upload successful:', result);
										
									} catch (error) {
										console.error('Failed to upload file:', error);
									}
								}
							}
						});
					}
				},

				// 在初始化OSS客户端之后定义一个函数用来获取新的STS Token
				getNewSTSToken(callback) {
					$.ajax({
						url: "http://localhost:8099/pcApi/fileUpload/getOSSToken",
						dataType: "json",
						method: "POST",
						headers: {
							"token": token // 这里的token应该来自实际的用户认证信息或者存储中的有效token
						},
						success: function(data) {
							if (data.code === 0) {
								const newCredentials = data.data;
								callback(null, {
									accessKeyId: newCredentials.accessKeyId,
									accessKeySecret: newCredentials.accessKeySecret,
									securityToken: newCredentials.securityToken
								});
							} else {
								// 处理错误,例如重新获取或其他逻辑
								console.error('Failed to fetch new STS Token:', data.message);
								callback(new Error(data.message));
							}
						},
						error: function(xhr, status, err) {
							// 请求失败处理
							console.error('Error while fetching new STS Token:', err);
							callback(err);
						}
					});
				}
			}
		});
	</script>
</html>

对照着需要引入jquery与vue,而aliyun-oss-sdk.min.js需要通过npm 或yarn安装一下,或者引入cdn也行

npm install ali-oss --save
# 或者
yarn add ali-oss

运行

image-20240402003730282

image-20240402003846053

发现图片已经上传到oss

以上是通过临时凭证上传文件到OSS,使用临时凭证的目的就是为了安全考虑,可以设置过期时间,当凭证超时必须从后端重新生成凭证才能上传文件,不会发生因为凭证被人截获后被无限上传文件的情况。

文件访问(通过临时凭证访问文件)

文件上传是通过临时凭证上传的,那么文件下载也是如此,也需要通过临时凭证,倘若上传的文件能够让人随意访问,如果是正常访问还好,就怕有的人通过类似jmeter的软件来恶意刷OSS的流量,要知道OSS也是通过流量算钱的,要是被上万的请求连续刷的话,很快阿里云平台就要提示你余额不足要充值了,所以为了安全起见,OSS的权限控制尽量不要设置成公共读,应该设置成私有

image-20240907145141535

再保险一点把,阻止公共访问也开启

image-20240907145253498

这样的话,我们在OSS平台直接访问文件则会看到一堆参数,有Expires(过期时间)、OSSAccessKeyId(临时凭证)、Signature(签名)、以及security-token(安全token),这些参数都是平台生成的。

image-20240907150402514

通过这个带参数的链接是可以请求访问文件的

image-20240907150531741

但是去掉这些参数就不行了

image-20240907150617556

这样做可以防止链接被别人盗刷,想要访问文件必须先请求后端接口获取临时凭证以及在过期时间范围之内才能访问,如果过期超时了,则需要重新请求后端接口重新生成凭证才能再次访问。

其实如果流量不计费,被盗刷也无所谓,但是OSS是按流量计费的,所以我们必须安全使用,不能只简单进行上传下载就行。

所以我们的后端应该像OSS平台一样在访问链接上加上一堆参数,来提供给前端去请求访问。

根据之前环境变量中配置的这些参数REGIONROLEARNOSS_ACCESS_KEY_IDOSS_ACCESS_KEY_SECRETOSS_ENDPOINT,可以生成临时凭证信息 accessKeyIdaccessKeySecretsecurityToken,这里跟之前代码是一致的。

@Override
    public R getSignedUrl(String objectKey) {

        try {
            EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();

            String region = System.getenv("REGION");
            String rolearn = System.getenv("ROLEARN");

            // 初始化默认profile,填入您的AK信息
            DefaultProfile profile = DefaultProfile.getProfile(region, credentialsProvider.getCredentials().getAccessKeyId(), credentialsProvider.getCredentials().getSecretAccessKey());

            // 创建DefaultAcsClient实例并初始化
            IAcsClient client = new DefaultAcsClient(profile);

            // 创建AssumeRoleRequest请求对象
            AssumeRoleRequest request = new AssumeRoleRequest();

            request.setRoleArn(rolearn);
            request.setRoleSessionName("MySession");
            // 可选设置会话持续时间,默认为900秒
            request.setDurationSeconds(900L);

            // 发起请求并获取响应
            AssumeRoleResponse response = client.getAcsResponse(request);

            // 解析并打印临时凭证信息
            String accessKeyId = response.getCredentials().getAccessKeyId();
            String accessKeySecret = response.getCredentials().getAccessKeySecret();
            String securityToken = response.getCredentials().getSecurityToken();
            String endpoint = System.getenv("OSS_ENDPOINT");
            String bucket = System.getenv("BUCKET");

            System.out.println("临时AccessKeyId: " + accessKeyId);
            System.out.println("临时AccessKeySecret: " + accessKeySecret);
            System.out.println("临时SecurityToken: " + securityToken);

            // 使用临时凭证创建OSS客户端
            OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret, securityToken);

            try {
                // 设置URL过期时间为1小时
                Date expiration = new Date(System.currentTimeMillis() + 3600 * 1000);

                // 创建GeneratePresignedUrlRequest实例并设置相关参数
                GeneratePresignedUrlRequest presignedUrlRequest = new GeneratePresignedUrlRequest(bucket, objectKey);
                presignedUrlRequest.setExpiration(expiration);


                // 生成预签名URL
                URL url = ossClient.generatePresignedUrl(presignedUrlRequest);

//                // 将securityToken附加到预签名URL中
//                String encodedSecurityToken = URLEncoder.encode(securityToken, StandardCharsets.UTF_8.name());
//                String completeUrl = url.toExternalForm() + "&x-oss-security-token=" + encodedSecurityToken;

                // 返回结果
                System.out.println("Pre-signed URL: " + url.toString());
                return R.ok().put("data", url.toString());
            } finally {
                // 关闭OSSClient
                ossClient.shutdown();
            }
        } catch (ClientException e) {
            log.error("com.aliyun.oss.ClientException 获取临时凭证失败:{}", e);
            throw new RRException("获取临时凭证失败");
        } catch (ServerException e) {
            log.error("ServerException 获取临时凭证失败:{}", e);
            throw new RRException("ServerException 获取临时凭证失败");
        } catch (com.aliyuncs.exceptions.ClientException e) {
            log.error("com.aliyuncs.exceptions.ClientException 获取临时凭证失败:{}", e);
            throw new RRException("com.aliyuncs.exceptions.ClientException 获取临时凭证失败");
        }
    }

最终生成了带签名的链接url,与平台生成的访问链接一样,当然对于凭证的过期时间以及链接的过期时间都可以在代码中进行设置,当前我把凭着有效时间设置了900秒,而链接有效时间设置了1小时,当然时间根据具体需求而定了。

最后用controller来调用刚才的service方法后,请求controller就可以看到返回的带签名的链接了。

    @ApiOperation("获取OSS签名链接(当bucket设置不能匿名访问,则需要通过生成的签名链接才能访问)")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "objectKey", value = "文件路径", required = true, dataType = "String", paramType = "query")
    })
    @GetMapping("/getOSSSignedUrl")
    public R getOSSSignedUrl(@RequestParam("objectKey") String objectKey) {
        return fileUploadOSSService.getSignedUrl(objectKey);
    }

image-20240907153209185

通过对这个链接发起请求则可以看到对应的文件,但是等时间超时过期后就不能再次访问,必须再次请求getOSSSignedUrl接口才能获取新的带签名的链接访问。

image-20240907153354928

为了避免被人恶意狂刷流量,超时时间可以设置短一点,即使在过期时间范围内被多刷了几次,一旦过了过期时间他们就刷不了,这样就完成了防止被人恶意刷流量的工作。

保险起见我们还可以将OSS对应的bucket设置防盗链,将我们需要访问OSS资源的前端服务器域名输入,这样除了前端能对OSS发起异步请求外,来自其他地址的异步请求一律会被拦截。当然这个设置只是防异步请求,如果是重定向请求的话并不会拦截……

image-20240907155111013

最后,我们的后端本身也要做好安全机制,如果别人能很容易拿到后端系统的token并请求getOSSSignedUrl接口的话,那就难办了!!!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值