从零实现OSS阿里云图片上传：前端采用的vue3+element-plus，后端采用javaspingboot，实现上传图片到云，然后存储数据库链接能够回显的效果

后端（Java Spring Boot）

1. 添加依赖

在 pom.xml 中添加必要的依赖，包括阿里云 OSS SDK、Spring Boot Web、MyBatis-Plus 等：

   
   
        org.springframework.boot
        spring-boot-starter-web
   
   
   
        com.baomidou
        mybatis-plus-boot-starter
        3.4.3.4
   
   
   
        com.aliyun.oss
        aliyun-sdk-oss
        3.15.1
   
   
   
        mysql
        mysql-connector-java
   

2. 配置阿里云 OSS

在 application.properties 中配置阿里云 OSS 的相关信息：

 aliyun.oss.endpoint=your-endpoint
aliyun.oss.accessKeyId=your-access-key-id
aliyun.oss.accessKeySecret=your-access-key-secret
aliyun.oss.bucketName=your-bucket-name

3. 创建实体类和 Mapper

创建一个实体类 Image 来表示图片信息，并创建对应的 Mapper 接口：

 

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

@Data
@TableName("images")
public class Image {
    @TableId
    private Long id;
    private String imageUrl;
}

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface ImageMapper extends BaseMapper {
}

4. 创建服务类

创建一个服务类 ImageService 来处理图片上传和保存到数据库的逻辑：

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.PutObjectRequest;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.UUID;

@Service
public class ImageService {

    @Value("${aliyun.oss.endpoint}")
    private String endpoint;
    @Value("${aliyun.oss.accessKeyId}")
    private String accessKeyId;
    @Value("${aliyun.oss.accessKeySecret}")
    private String accessKeySecret;
    @Value("${aliyun.oss.bucketName}")
    private String bucketName;

    private final ImageMapper imageMapper;

    public ImageService(ImageMapper imageMapper) {
        this.imageMapper = imageMapper;
    }

    public String uploadImage(MultipartFile file) throws IOException {
        // 创建 OSSClient 实例
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
        try {
            // 生成唯一的文件名
            String fileName = UUID.randomUUID().toString() + "-" + file.getOriginalFilename();
            // 创建 PutObjectRequest 对象
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, fileName, file.getInputStream());
            // 上传文件
            ossClient.putObject(putObjectRequest);
            // 拼接图片的访问 URL
            String imageUrl = "https://" + bucketName + "." + endpoint + "/" + fileName;
            // 保存图片 URL 到数据库
            Image image = new Image();
            image.setImageUrl(imageUrl);
            imageMapper.insert(image);
            return imageUrl;
        } finally {
            // 关闭 OSSClient
            ossClient.shutdown();
        }
    }
}

5. 创建控制器

创建一个控制器 ImageController 来处理前端的图片上传请求：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;

@RestController
public class ImageController {

    @Autowired
    private ImageService imageService;

    @PostMapping("/upload")
    public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
        return imageService.uploadImage(file);
    }
}

前端（Vue 3 + ElementPlus）

1. 创建项目

使用 Vue CLI 创建一个新的 Vue 3 项目，并安装 ElementPlus：

vue create my-project --default
cd my-project
npm install element-plus --save

2. 配置 ElementPlus

在 main.js 中引入并使用 ElementPlus：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 创建上传组件

在 src/components 目录下创建一个 ImageUpload.vue 组件：

4. 在 App.vue 中使用组件

运行项目

1. 启动 Spring Boot 后端项目。
2. 启动 Vue 3 前端项目：

 npm run serve

注意事项

• 请将 application.properties 中的阿里云 OSS 配置信息替换为你自己的信息。
• 确保你的数据库已经创建了 images 表，表结构与 Image 实体类对应。
• 后端端口和前端请求地址需要根据实际情况进行调整。