使用阿里云oss存储进行图片上传实现方案及其多线程优化

1、引入依赖

<dependencies>
    <!-- 阿里云oss依赖 -->
    <dependency>
        <groupId>com.aliyun.oss</groupId>
        <artifactId>aliyun-sdk-oss</artifactId>
        <version>3.9.1</version>
    </dependency>
    <!-- 日期工具栏依赖 -->
    <dependency>
        <groupId>joda-time</groupId>
        <artifactId>joda-time</artifactId>
        <version>2.10.1</version>
    </dependency>
</dependencies>

2、在yml中进行配置

aliyun:
  endpoint: oss-cn-beijing.aliyuncs.com # 地域节点
  keyid:   # AccessKey
  keysecret:  # AccessSecret
  bucketname: ssyx-hxd   # 桶名称

3、代码

controller

package com.atguigu.ssyx.product.controller;

import com.atguigu.ssyx.common.result.Result;
import com.atguigu.ssyx.product.service.FileUploadService;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

/**
 * @BelongsProject: guigu-ssyx-parent
 * @BelongsPackage: com.atguigu.ssyx.product.controller
 * @Author: 栋哥
 * @CreateTime: 2024-03-19  22:03
 * @Description: TODO
 * @Version: 1.0
 */
@RestController
@RequestMapping("/admin/product")
@Api(tags = "文件上传")
@CrossOrigin
public class FileUploadController {

    @Autowired
    private FileUploadService fileUploadService;

    @ApiOperation("图片上传")
    @PostMapping("fileUpload")
    public Result fileUpload(MultipartFile file){
        String url = fileUploadService.uploadFile(file);
        return Result.ok(url);
    }

}

service

package com.atguigu.ssyx.product.service;

import org.springframework.web.multipart.MultipartFile;

public interface FileUploadService {
    String uploadFile(MultipartFile file);
}

impl

注意事项:

  1. 文件名需要进行重命名,防止文件覆盖。
  2. 可以根据日期进行文件名分组处理。
package com.atguigu.ssyx.product.service.impl;

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 com.atguigu.ssyx.product.service.FileUploadService;
import org.joda.time.DateTime;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

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

/**
 * @BelongsProject: guigu-ssyx-parent
 * @BelongsPackage: com.atguigu.ssyx.acl.service.impl
 * @Author: 栋哥
 * @CreateTime: 2024-03-19  22:04
 * @Description: TODO
 * @Version: 1.0
 */
@Service
public class FileUploadServiceImpl implements FileUploadService {

    @Value("${aliyun.endpoint}")
    private String endPoint;

    @Value("${aliyun.keyid}")
    private String accessKey;

    @Value("${aliyun.keysecret}")
    private String secreKey;

    @Value("${aliyun.bucketname}")
    private String bucketName;

    @Override
    public String uploadFile(MultipartFile file) {
        // 填写Object完整路径,完整路径中不能包含Bucket名称,例如exampledir/exampleobject.txt。
        // 重命名防止重名覆盖
        String objectName = file.getOriginalFilename();
        String uuid = UUID.randomUUID().toString().replaceAll("-", "");
        objectName = uuid + objectName;
        // 对上传的文件根据年月日进行分组处理
        String timeUrl = new DateTime().toString("yyyy/MM/dd");
        objectName = timeUrl + "/" +objectName;
        // 创建OSSClient实例。
        OSS ossClient = new OSSClientBuilder().build(endPoint, accessKey,secreKey);

        try {
            // 得到文件输入流
            InputStream inputStream = file.getInputStream();
            // 创建PutObjectRequest对象。
            // 1.buck名称 2.上传文件路径 + 名称 3.文件输入流
            PutObjectRequest putObjectRequest = new PutObjectRequest(bucketName, objectName, inputStream);
            //设置有响应值
            putObjectRequest.setProcess("true");
            // 创建PutObject请求。
            PutObjectResult result = ossClient.putObject(putObjectRequest);
            // 解决响应中文乱码问题
            return URLDecoder.decode(result.getResponse().getUri(), StandardCharsets.UTF_8.toString());
        } 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());
        } catch (IOException e) {
            throw new RuntimeException(e);
        } finally {
            if (ossClient != null) {
                ossClient.shutdown();
            }
        }

        return null;
    }
}

优化

方案一

创建线程池,在实现类方法上加==@Async==注解。

结果:失败

原因:

​ 1. 首先前端传递过来的文件,会存储到临时文件夹中,即类似这样的一个路径。C:\Users\86189\logs\csp\upload_4330f731_2ae0_4955_a484_5862fd4530a2_00000009.tmp (系统找不到指定的文件。)

​ 开启异步执行的时候,主线程结束,临时文件就会被清空了,子线程获取不到临时文件,所以会报错。

解决方案:

​ 1. 在开启异步之前,需要把MultipartFile(file)转换为流来进行操作即可file.getInputStream()。

方案二

在controller中获取到图片的 inputStream 流,将流对象和重命名后的文件名,传递给方法。这样就能在开启@Async注解前获取到inputStream

结果:失败

原因: 需要获取结果返回值,但使用@Async开启子线程,主线程已经返回给前端,所以获取不到返回的图片路径。

解决方案:使用Future返回值 调用get()方法,阻塞主线程。返回给前端对象。(不知道为啥,没起作用,所以才有最终方案)

最终方案

使用 CompletableFuture 调用get()方发阻塞主线程。等待子线程返回的结果。

@ApiOperation("图片上传")
    @PostMapping("fileUpload")
    public Result fileUpload(MultipartFile file){
        try {
            //启动异步线程
            CompletableFuture<String> uCompletableFuture = CompletableFuture.supplyAsync(() -> {
                return fileUploadService.uploadFile(file);
            });
            // get() 会阻塞主线程,等待异步方法的执行结果。
            return Result.ok(uCompletableFuture.get());
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中调用阿里云OSS进行多张图片,可以按照以下步骤进行操作: 1. 在你的Vue项目中安装ali-oss和element-ui(可选)依赖: ``` npm install ali-oss element-ui ``` 2. 在你的Vue组件中引入所需的库和样式: ```javascript import OSS from 'ali-oss'; import { Message, Upload } from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; ``` 3. 创建OSS客户端实例并配置连接参数: ```javascript const client = new OSS({ region: '<your-oss-region>', accessKeyId: '<your-access-key-id>', accessKeySecret: '<your-access-key-secret>', bucket: '<your-bucket-name>' }); ``` 确保替换 `<your-oss-region>`, `<your-access-key-id>`, `<your-access-key-secret>` 和 `<your-bucket-name>` 为你自己的阿里云OSS相关信息。 4. 在模板中使用element-ui的Upload组件来实现图片: ```html <template> <div> <el-upload class="upload-demo" action="" :auto-upload="false" :on-change="handleFileChange" > <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上OSS</el-button> </el-upload> </div> </template> ``` 5. 在Vue组件的methods中实现文件选择和上的逻辑: ```javascript methods: { handleFileChange(fileList) { this.fileList = fileList; }, handleUpload() { this.fileList.forEach(file => { const fileName = file.name; client.put(fileName, file) .then(() => { Message.success(`${fileName} 上成功`); }) .catch(error => { Message.error(`${fileName} 上失败:${error}`); }); }); } } ``` 以上代码中的`fileList`是一个存放选择的文件列表的数组,可以在data中定义并初始化为空数组。 通过以上步骤,你就可以在Vue中调用阿里云OSS进行多张图片了。请确保你的阿里云OSS配置正确,并根据具体需求进行适当的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值