阿里云OSS入门

一、登录后找到对象存储OSS

二、点击bucket列表

三、创建bucket，设置跨域规则

 

四、创建子账户设置AccessKey

五、添加权限

 六、Java接入OSS

引入SDK,阿里云提供了OSS的SDK的jar，我们导入都项目中

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

使用java代码实现简单上传

public class AliyunOSSTest {

    public static void main(String[] args) {
        // Endpoint 地域端点
        String endpoint = "http://oss-cn-chengdu.aliyuncs.com";
        
        // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录 https://ram.console.aliyun.com 创建RAM账号。
        String accessKeyId = "你的accessKey";
        String accessKeySecret = "你的accessKeySecret";

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

        // 创建PutObjectRequest对象。 ，
        PutObjectRequest putObjectRequest = new PutObjectRequest("存储空间名", "文件名",
                new File("C:\\Users\\yang\\Desktop\\美图"));

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

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

七、签名后浏览器直传

@RestController
@RequestMapping("/oss")
public class FileController {
    //OSS文件上传
    @Autowired
    OssProperties ossProperties;
    //服务返回oss签名 ，web拿到签名后，上传文件到OSS
    @GetMapping("/sign")
    public AjaxResult  ossSign(){
        //读取配置
        String accessKey = ossProperties.getAccessKey();
        String secretKey = ossProperties.getSecretKey();
        String endpoint = ossProperties.getEndpoint();
        String bucket = ossProperties.getBucketName();
        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKey, secretKey);
        // host的格式为 bucketname.endpoint
        String host = "https://" + bucket + "." + endpoint;

        // callbackUrl为 上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
        String callbackUrl = "http://localhost:4010/callback";

        // 用户上传文件时指定的前缀。
        String dir = "ly";

        try {
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);

            // PostObject请求最大可支持的文件大小为5 GB，即CONTENT_LENGTH_RANGE为5*1024*1024*1024。
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);

            Map<String, String> respMap = new LinkedHashMap<String, String>();
            respMap.put("accessid", accessKey);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));

            return AjaxResult.me().setResultObj(respMap);
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return null;
    }

    /*删除文件*/
    @PostMapping("/remove")
    public AjaxResult remove(@RequestBody Map<String,String> map) {
        System.out.println(map.get("file"));
        // yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com。
        String endpoint = ossProperties.getEndpoint();
        // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
        String accessKeyId = ossProperties.getAccessKey();
        String accessKeySecret = ossProperties.getSecretKey();
        // 填写Bucket名称。
        String bucketName = ossProperties.getBucketName();
        // 填写文件完整路径。文件完整路径中不能包含Bucket名称。
        String objectName = map.get("file");

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

        // 删除文件或目录。如果要删除目录，目录必须为空。
        ossClient.deleteObject(bucketName, objectName);

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

从配置文件中读取数据

@Data
@Component
@ConfigurationProperties(prefix = "file.alicloud")
public class OssProperties {

    private String accessKey;
    private String secretKey;
    private String endpoint;
    private String bucketName;
}

八、WEB前端上传文件

前端的上传文件之间需要先访问后端服务获取签名，然后把签名作为参数和文件一起提交到OSS，我这里使用的是ElementUI的Upload组件做例：

1、上传组件

  <el-upload
    class="upload-demo"
    action="http://abc.oss-cn-chengdu.aliyuncs.com"
    :data="dataObj"
    :before-upload="beforeUpload"
    :on-success="handleUploadSuccess"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    list-type="picture">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>

解释一下：

• action是上传到OSS的端点
• :data="dataObj"是需要提交的数据，即：从后台服务器获取到的签名信息
• :before-upload=“beforeUpload” ：选择文件上传之前触发的函数，我们需要在这个函数中发Ajax请求到后端服务器获取签名，然后赋值给 dataObj
• :on-success=“handleUploadSuccess” : 上传成功之后的结果处理
   

2、js部分

export default {
    name: 'singleUpload',
    data() {
      return {
        url:'',
        fileList: [],
        dataObj: {	//提交到OSS的参数
          policy: '',
          signature: '',
          key: '',
          ossaccessKeyId: '',
          dir: '',
          host: ''
        }
      };
    },
    methods: {
	  handleRemove(file, fileList) {
      },
      handlePreview(file, fileList) {
      },
      beforeUpload(file) {
        let $this = this;
        //请求服务器签名
        axios.get('/ossSign').then(function(response){
          //设置相关的参数
          $this.dataObj.policy = response.data.policy;
          $this.dataObj.signature = response.data.signature;
          $this.dataObj.ossaccessKeyId = response.data.accessid;
          //上传的文件名，使用UUID处理一下
          $this.dataObj.key = response.data.dir + '/'+getUUID()+'_${filename}';
          $this.dataObj.dir = response.data.dir;
          $this.dataObj.host = response.data.host;
        }).catch(function (error) {
          console.log(error);
        });
      },
      handleUploadSuccess(res, file) {
        this.fileList.pop();
        //上传的完整的文件地址
        var urlPath = this.dataObj.host + '/' + this.dataObj.key.replace("${filename}",file.name) ;
        this.url = urlPath;
      }
    }
  }

beforeUpload做的事情很简单，就是去服务器获取一个签名，然后赋值给dataObj即可，文件提交上传的时候自然就带上了签名的函数，最后在handleUploadSuccess方法中处理一下结果。

后续的动作就是把文件的地址根据业务情况保存到数据库表中，以后根据这个地址就可以访问文件了