如何将SpringBoot+Vue上传图片轻松保存到阿里云OSS上

2024-01-12 16:19:47

在当今互联网时代，图片在我们的生活中扮演着越来越重要的角色。无论是社交媒体、电子商务还是企业网站，都离不开图片的展示。因此，如何将图片存储和管理成为一个至关重要的问题。阿里云OSS作为一款专业、可靠、安全的对象存储服务，为我们提供了存储和管理图片的最佳解决方案。

准备工作

注册阿里云账号并开通OSS服务。
创建一个新的OSS存储空间（Bucket）。
获取OSS的Access Key ID和Access Key Secret。
安装SpringBoot和Vue。

配置

在SpringBoot项目中添加如下依赖：

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

在Vue项目中添加如下依赖：

import OSS from 'ali-oss';

编码

在SpringBoot项目中创建如下代码：

import com.aliyun.oss.OSSClient;
import com.aliyun.oss.model.PutObjectRequest;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@RestController
public class FileController {

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) {
        // 创建OSSClient实例。
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId, accessKeySecret);

        // 创建PutObjectRequest实例。
        PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, file.getInputStream());

        // 上传文件。
        ossClient.putObject(putObjectRequest);

        // 关闭OSSClient。
        ossClient.shutdown();

        return "success";
    }
}

在Vue项目中创建如下代码：

import OSS from 'ali-oss';

const client = new OSS({
    region: 'oss-cn-shanghai',
    accessKeyId: 'LTAI5t***',
    accessKeySecret: '**** **** ',
    bucket: 'my-bucket'
});

client.put('my-object', file).then((result) => {
    console.log(result);
}).catch((err) => {
    console.log(err);
});