axios图片上传到OSS服务 oss 上传

教你三分钟上手阿里云OOS上传操作

1.注册登录

如果小伙伴需要进行使用阿里云oss操作，第一步我们得注册/登录阿里云 https://www.aliyun.com/，小编建议大家尽量使用支付宝登录，方便后期进行实名认证；

2.开通进入云存储

1.登录成功后将鼠标悬停在主界面导航栏中的产品区域位置并进入对象存储OSS;

2.进入云存储OSS界面后小伙伴需要进行开通云存储这项功能 小提示：只有完成 实名认证 的小伙伴才能正常进行开通，开通成功后在原先“立即开通”的位置会变化成“管理控制台”，小伙伴们点击进入就可以了；

3.使用云存储

1.因为小编之前使用过云存储所以会存在Bucket名称，在这里我会一步步重新带小伙伴们走一遍流程，进入对象存储主界面后会看到概览中有一项Bucket列表，这就是用于创建云存储文件夹的地方；根据下图的流程会进入到一个创建Bucket添加信息栏中；

2.由于截图面积原因，小编就以文字形式呈现信息栏中的选择项：

【Bucket名称】：用户自定义名称
【地域】：自定义选择
【存储类型】：标准存储
【同城冗余存储】：关闭「收费」
【版本控制】：不开通「收费」
【读写权限】：公共读
【服务端加密方式】：无
【实时日志查询】：不开通「收费」
【定时备份】：不开通「收费」

3.进入设置成功的存储空间内需要保存Bucket 域名；在oss主界面中进入Access Key并查看保存，后期会在xml配置中使用；(如下图)

• Bucket地址：

• Access Key：

4.完成到这一步就说明阿里云OSS已经设置好了，接下来就是编写后端的阶段了！

4.后端编写上传功能

1.阿里云上传后端demo代码我化成成四等份：

resources：

• 主要存放云存储的Bucket地址及Access Key配置信息；

# 端口号
server.port=8002
spring.application.name=yun-upload

# 环境地址
spring.profiles.active=dev

# 阿里云云存储OSS配置信息
# Bucket地址
aliyun.oss.file.endpoint=自定义
# Access Key
aliyun.oss.file.keyid=自定义
aliyun.oss.file.keysecret=自定义
# Bucket名称
aliyun.oss.file.bucketname=自定义

utils：

• 用于读取xml配置信息，将配置信息转换成工具类进行调用；

package com.csdn.oss.utils;

import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

//当项目已启动，spring接口，spring加载之后，执行接口一个方法
@Component
public class ConstantPropertiesUtils implements InitializingBean {

    //读取配置文件内容
    @Value("${aliyun.oss.file.endpoint}")
    private String endpoint;

    @Value("${aliyun.oss.file.keyid}")
    private String keyId;

    @Value("${aliyun.oss.file.keysecret}")
    private String keySecret;

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

    //定义公开静态常量
    public static String END_POIND;
    public static String ACCESS_KEY_ID;
    public static String ACCESS_KEY_SECRET;
    public static String BUCKET_NAME;

    @Override
    public void afterPropertiesSet() throws Exception {
        END_POIND = endpoint;
        ACCESS_KEY_ID = keyId;
        ACCESS_KEY_SECRET = keySecret;
        BUCKET_NAME = bucketName;
    }
}

service：

• 上传接口；

package com.csdn.oss.service;

import org.springframework.web.multipart.MultipartFile;

public interface OssService {
    //上传头像到oss
    String uploadFileAvatar(MultipartFile file);
}

serviceImpl：

• 用于获取上传文件进行判断处理；

package com.csdn.oss.service.impl;

import com.aliyun.oss.OSS;
import com.aliyun.oss.OSSClientBuilder;
import com.csdn.oss.service.OssService;
import com.csdn.oss.utils.ConstantPropertiesUtils;
import org.joda.time.DateTime;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

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

@Service
public class OssServiceImpl implements OssService {

    //上传头像到oss
    @Override
    public String uploadFileAvatar(MultipartFile file) {
        // 工具类获取值
        String endpoint = ConstantPropertiesUtils.END_POIND;
        String accessKeyId = ConstantPropertiesUtils.ACCESS_KEY_ID;
        String accessKeySecret = ConstantPropertiesUtils.ACCESS_KEY_SECRET;
        String bucketName = ConstantPropertiesUtils.BUCKET_NAME;

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

            //获取上传文件输入流
            InputStream inputStream = file.getInputStream();
            //获取文件名称
            String fileName = file.getOriginalFilename();

            //1 在文件名称里面添加随机唯一的值
            String uuid = UUID.randomUUID().toString().replaceAll("-","");
            // yuy76t5rew01.jpg
            fileName = uuid+fileName;

            //2 把文件按照日期进行分类
            //获取当前日期
            //   2019/11/12
            String datePath = new DateTime().toString("yyyy/MM/dd");
            //拼接
            //  2019/11/12/ewtqr313401.jpg
            fileName = datePath+"/"+fileName;

            //调用oss方法实现上传
            //第一个参数  Bucket名称
            //第二个参数  上传到oss文件路径和文件名称   aa/bb/1.jpg
            //第三个参数  上传文件输入流
            ossClient.putObject(bucketName,fileName , inputStream);

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

            //把上传之后文件路径返回
            //需要把上传到阿里云oss路径手动拼接出来
            //  https://edu-guli-1010.oss-cn-beijing.aliyuncs.com/01.jpg
            String url = "https://"+bucketName+"."+endpoint+"/"+fileName;
            return url;
        }catch(Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

controller：

• 将上传返回到前端；

package com.csdn.oss.controller;

import com.csdn.commonutils.R;
import com.csdn.oss.service.OssService;
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;

@RestController
@RequestMapping("/eduoss/fileoss")
@CrossOrigin
public class OssController {

    @Autowired
    private OssService ossService;

    //上传头像的方法
    @PostMapping
    public R uploadOssFile(MultipartFile file) {
        //获取上传文件  MultipartFile
        //返回上传到oss的路径
        String url = ossService.uploadFileAvatar(file);
        return R.ok().data("url",url);
    }
}

5.测试运行

1. 刚刚上述代码是专用于阿里云OSS上传操作的Demo代码，没有办法进行测试运行的；但是呢？小编把写好的Demo上传到CSDN中免费供大家参考，希望大家都能学的开心、学成所归；
2. 下载完整代码后检查依赖及配置文件是否正常，确定无误后进行运行，从下图可以看出小编这里已经正常运行起来了；

2. 我们打开浏览器进行Swagger接口测试http://localhost:8002/swagger-ui.html



3. 
   

• Swagger接口文档测试成功后，我们进入对象存储中去看看我刚刚上传的文件；
• 从图中可以看出工具类帮我自动生成日期形式的文件夹及文件名；
• 一套完成的阿里云OSS上传就完成了！

6.源代码

• 答应大家的源代码我会上传到Git仓库中，有兴趣的朋友可以下拉参考！
• git仓库地址：https://gitee.com/liu-liangchen/alicloud-oss-upload



•