博主
258
258
258
258
标签
Vue3 springboot elasticsearch linux jdk centos docker vmware kibana
专辑

第二节 文件上传到阿里云OSS介绍

亮子 2021-06-08 08:14:08 6860 0 0 0

1、创建Bucket

Bucket有点像电脑里面的盘符或者目录，我们文件的上传，必须指定上传到哪个Bucket里面。因此，在上传之前必须创建它。

在阿里云控制台点击OSS服务，然后点击【Bucket列表】就可以看到如下界面：

图片alt

然后点击【创建Bucket】按钮，按下图填写：

图片alt

  • Bucket名称：需要自己要进行命名，相当于自己文件的存储目录。

  • 区域：这个选择很重要，因为后面调用api接口上传文件的时候需要使用。

  • Endpoint：这个也很重要，因为后面调用api接口上传文件的时候也需要使用。

上述选择完成后，就可以点击【确定】按钮进行创建了。

创建成功后，进入Bucket信息页面，可以点击左侧的【文件管理】按钮，出现如下界面：

图片alt

好了，到此为止，阿里云的OSS配置就算完成了，新手对于这个过程感觉十分困惑，因此我这里说的比较详细。

2、OSS流式上传

下面是官网文档地址以及官方代码，我摘抄了几个入门级的代码。

https://help.aliyun.com/document_detail/84781.html?spm=a2c4g.11186623.6.787.101245dcJzaFge

（1）上传字符串

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 创建PutObjectRequest对象。
String content = "Hello OSS";
// <yourObjectName>表示上传文件到OSS时需要指定包含文件后缀在内的完整路径，例如abc/efg/123.jpg。
PutObjectRequest putObjectRequest = new PutObjectRequest("<yourBucketName>", "<yourObjectName>", new ByteArrayInputStream(content.getBytes()));

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

// 上传字符串。
ossClient.putObject(putObjectRequest);

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

（2）上传Byte数组

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 上传Byte数组。
byte[] content = "Hello OSS".getBytes();
ossClient.putObject("<yourBucketName>", "<yourObjectName>", new ByteArrayInputStream(content));

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

（3）上传网络流

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 上传网络流。
InputStream inputStream = new URL("https://www.aliyun.com/").openStream();
ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);

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

（4）上传文件流

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用RAM子账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 上传文件流。
InputStream inputStream = new FileInputStream("<yourlocalFile>");
ossClient.putObject("<yourBucketName>", "<yourObjectName>", inputStream);

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

3、简单文件上传

// Endpoint以杭州为例，其它Region请按实际情况填写。
String endpoint = "http://oss-cn-hangzhou.aliyuncs.com";
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
String accessKeyId = "<yourAccessKeyId>";
String accessKeySecret = "<yourAccessKeySecret>";

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

// 创建PutObjectRequest对象。
PutObjectRequest putObjectRequest = new PutObjectRequest("<yourBucketName>", "<yourObjectName>", new File("<yourLocalFile>"));

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

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

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

4、通过自定义WEB接口上传文件

首先我们来定一个阿里云OSS文件上传的一个工具类，具体代码如下：

package com.shenmazong.utils;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.aliyun.oss.model.PutObjectResult;
import org.springframework.web.multipart.MultipartFile;

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

public class UploadFileUtils {

    /**
     * TODO uploadAliyunOss 阿里云OSS文件上传
     * @param file
     * @param fileName
     * @return
     */
    public static String uploadAliyunOss(MultipartFile file, String fileName) {
        String url = null;
        // Endpoint以杭州为例，其它Region请按实际情况填写。
        String endpoint = "http://oss-cn-beijing.aliyuncs.com";
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。

        // shenmazong@1642590691341298.onaliyun.com
        String accessKeyId = "XXXX";
        String accessKeySecret = "XXXX";

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

        // 创建PutObjectRequest对象。
        // 上传文件流。
        PutObjectResult result = null;
        String newName = UUID.randomUUID().toString();
        try {
            result = ossClient.putObject("shenmazong", fileName, file.getInputStream());
            url = "https://shenmazong.oss-cn-beijing.aliyuncs.com/" + fileName;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }

        // 关闭OSSClient。
        ossClient.shutdown();
        return url;
    }
}

上面的工具类，是传输web上传的文件流，然后返回能够访问的url，这样我们web网上实现图片文件上传，就很容易了。

下面我们就可以编写service来实现我们的文件上传接口了。

   /**
     * TODO 实现用户头像的上传
     * @param userId
     * @param file
     * @return
     */
    @Override
    public ResponseResult uploadHead(Integer userId, MultipartFile file) {
        ResponseResult result = ResponseResult.SUCCESS();

        //--1 验证用户是否存在
        TbUser user = iTbUserMapper.selectById(userId);
        if(user == null) {
            result.setCode(-1);
            result.setMessage("获取用户信息失败");
            return result;
        }

        //--2 上传文件
        if(file.isEmpty()){
            log.info("上传文件为空");
            result.setCode(-1);
            result.setMessage("上传文件为空");
            return result;
        }
        String fileName = file.getOriginalFilename();
        int size = (int) file.getSize();
        log.info(fileName + "-->" + size);

        UUID uuid = UUID.randomUUID();
        String suffix = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
        String newName = uuid.toString() + suffix;
        String headUrl = UploadFileUtils.uploadAliyunOss(file, newName);
        if(headUrl == null) {
            result.setCode(-1);
            result.setMessage("上传文件到OSS失败");
            return result;
        }

        //--3 修改用户头像链接
        user.setHeadurl(headUrl);
        iTbUserMapper.updateById(user);

        return result;
    }

service写好以后，就需要编写controller了，具体代码如下：

    /**
     * TODO uploadHead 上传头像图片
     * @param userId
     * @param file
     * @return
     */
    @ApiOperation(value = "头像上传", notes = "用户上传更新自己的头像")
    @ApiImplicitParams(value = {
            @ApiImplicitParam(name = "userId", value = "用户ID", required = true, dataType = "int", example = "0")
    })
    @PostMapping(value = "/uploadHead", headers = "content-type=multipart/form-data")
    public ResponseResult uploadHead(@RequestParam("userId") Integer userId,
                             @RequestParam("uploadFile") MultipartFile file) {
        return userService.uploadHead(userId, file);
    }

最后是html页面的示例代码，也一并贴上来：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <form action="upload" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="uploadFile">选择文件</label>
                <input type="file" id="uploadFile" name="uploadFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <button type="submit" class="btn btn-primary">上传</button>
        </form>
    </div>
</div>
</body>
</html>

最后的实例演示，是我在一个演示项目中拷贝过来的代码，没有针对咱们这个教程进行整理，但是作为参考资料，这部分代码是合格的。