图片头像上传(阿里云OSS)

一、注册阿里云账号:阿里云登录 - 欢迎登录阿里云,安全稳定的云计算服务平台

注册完成后找到对象存储OSS 功能

创建bucket

略............

二、后端

依赖:

java 复制代码
        <!--阿里云oss依赖坐标-->
        <dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.15.1</version>
        </dependency>

工具类:

java 复制代码
package com.itfly.utils;



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.PutObjectRequest;
import com.aliyun.oss.model.PutObjectResult;

import java.io.InputStream;

public class AliOssUtil {

    // Endpoint以华东1(杭州)为例,其它Region请按实际情况填写。
    private static final String ENDPOINT = "改成自己的";
    // 从环境变量中获取访问凭证。运行本代码示例之前,请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
    //EnvironmentVariableCredentialsProvider credentialsProvider = CredentialsProviderFactory.newEnvironmentVariableCredentialsProvider();
    private static final String ACCESS_KEY_ID="改";
    private static final String ACCESS_KEY_SECRET="改";
    // 填写Bucket名称,例如examplebucket。
    private static final String BUCKET_NAME = "你的bucket";

    public static String uploadFile(String objectName, InputStream in) throws Exception {


        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(ENDPOINT,ACCESS_KEY_ID, ACCESS_KEY_SECRET);
        String url = "";
        try {
            // 填写字符串。
            String content = "Hello OSS,你好世界";

            // 创建PutObjectRequest对象。
            PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKET_NAME, objectName, in);

            // 如果需要上传时设置存储类型和访问权限,请参考以下示例代码。
            // ObjectMetadata metadata = new ObjectMetadata();
            // metadata.setHeader(OSSHeaders.OSS_STORAGE_CLASS, StorageClass.Standard.toString());
            // metadata.setObjectAcl(CannedAccessControlList.Private);
            // putObjectRequest.setMetadata(metadata);

            // 上传字符串。
            PutObjectResult result = ossClient.putObject(putObjectRequest);
            //url组成: https://bucket名称.区域节点/objectName
            url = "https://"+BUCKET_NAME+"."+ENDPOINT.substring(ENDPOINT.lastIndexOf("/")+1)+"/"+objectName;
        } 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();
            }
        }

        return url;
    }
}
java 复制代码
package com.itfly.controller;


import com.itfly.conf.result.R;
import com.itfly.utils.AliOssUtil;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.util.UUID;

@RestController
public class FileUploadController {

    @PostMapping("/upload")
    public R<?> upload(MultipartFile file) throws Exception {
        String originalFilename = file.getOriginalFilename();
        //保证文件的名字是唯一的,从而防止文件覆盖
        String filename = UUID.randomUUID().toString()+originalFilename.substring(originalFilename.lastIndexOf("."));
        //file.transferTo(new File("C:\\Users\\Administrator\\Desktop\\files\\"+filename));
        String url = AliOssUtil.uploadFile(filename,file.getInputStream());
        return R.Success(url);
    }
}

测试:

点击发送后:

返回的url就是存储在阿里云的地址,直接访问就可以下载

在自己的工作台就可以看到:

三、前端获取

直接把url挂上去就行了

java 复制代码
<template>
        <img src="https://big-event-ityyf.oss-cn-beijing.aliyuncs.com/0afb0fc4-a81e-4544-b5fd-bac5c062ba22.png" alt="">
</template>
    
<script setup>
    
</script>
    
<style>
    
</style>
相关推荐
阿里-于怀8 小时前
阿里云发布《AI 原生应用架构白皮书》
人工智能·阿里云·ai·架构·白皮书·ai原生
九河云8 小时前
如何选择适合的加密方法来保护云计算中的数据
网络·科技·物联网·金融·云计算
博睿谷IT99_11 小时前
Linux 云计算核心技术:原理、组件与 K8s 实战部署
linux·kubernetes·云计算
我总是词不达意12 小时前
vue3 + el-upload组件集成阿里云视频点播从本地上传至点播存储
前端·vue.js·阿里云·elementui
qq_3391911415 小时前
aws docker安装,ec2安装docker-compose
docker·云计算·aws
qq_3391911419 小时前
aws ec服务器统一为国内时间。ec 设置上海
服务器·云计算·aws
AKAMAI1 天前
云成本困境:开支激增正阻碍欧洲AI创新
人工智能·云原生·云计算
@HNUSTer1 天前
基于 GEE 的 Sentinel-2 光谱、指数、纹理特征提取与 Sentinel-1 SAR 数据处理
云计算·sentinel·数据集·遥感大数据·gee·云平台·sar
BenChuat1 天前
使用 httpsok 给 QNAP NAS 添加阿里云域名的永久免费 HTTPS(SSL)证书
阿里云·https·ssl
字节跳动视频云技术团队1 天前
多媒体实验室画质理解大模型Q-Insight入选NeurIPS 2025 Spotlight
云计算·视频编码