【Vue+java+阿里云oss】服务端签名后文件直传及文件下载（私有bucket），详细步骤及前后端代码（一）

【Vue+java+阿里云oss】服务端签名后文件直传及文件下载（私有bucket），详细步骤及前后端代码（一）

阿里云文档地址：https://help.aliyun.com/document_detail/31926.html
本文仅有服务端签名后直传。 私有bucket下，文件下载见下一篇博客。

1.阿里云OSS控制台 创建私有bucket

打开阿里云OSS控制台，创建bucket。（公共读写更简单，私有可以防止其他人获取你的文件，避免数据泄漏或者流量消耗）

创建子账户

进入RAM控制台，创建子用户。

勾选Open API调用访问
然后添加权限AliyunOSSFullAccess

开启跨域

在bucket页面，开启跨域！

2.服务端代码 导入依赖

        
        
            com.alibaba.cloud
            spring-cloud-starter-alicloud-oss
            2.2.0.RELEASE
        

policy()接口

import com.aliyun.oss.OSS;
import com.aliyun.oss.common.utils.BinaryUtil;
import com.aliyun.oss.model.MatchMode;
import com.aliyun.oss.model.PolicyConditions;
import com.ruoyi.common.core.domain.AjaxResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;


import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.linkedHashMap;
import java.util.Map;

@RestController //就是普通的Controller 再加 将响应体以json格式返回  即@ResponseBody
public class OssController {

    @Autowired
    OSS ossClient;

    @Value("${spring.cloud.alicloud.oss.endpoint}")  //@Value 在nacos之前获取，所有写配置中心的话这个不能注入
    private String endpoint;
    @Value("${spring.cloud.alicloud.oss.bucket}")
    private String bucket;
    @Value("${spring.cloud.alicloud.access-key}")
    private String accessId;

    @RequestMapping("/xxx/xxx")
    public AjaxResult policy(){
        String host = "https://" + bucket + "." + endpoint; // host的格式为 bucketname.endpoint
        // callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
//        String callbackUrl = "http://88.88.88.88:8888";
        String format = new SimpleDateFormat("yyyy-MM-dd").format(new Date());
        String dir = format + "/"; // 用户上传文件时指定的前缀。

        Map respMap = null;
        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);
            respMap = new linkedHashMap<>();
            respMap.put("accessid", accessId);
            respMap.put("policy", encodedPolicy);
            respMap.put("signature", postSignature);
            respMap.put("dir", dir);
            respMap.put("host", host);
            respMap.put("expire", String.valueOf(expireEndTime / 1000));
            // respMap.put("expire", formatISO8601Date(expiration));
        } catch (Exception e) {
            // Assert.fail(e.getMessage());
            System.out.println(e.getMessage());
        } finally {
            ossClient.shutdown();
        }
        return AjaxResult.success().put("data",respMap);
    }
}

AjaxResult是统一返回结构，也可以直接返回Map,反正你能得到这个就行了

3.前端代码：

采用vue框架
①上传表单，这里用了element UI 自行导入即可

            选取文件
            上传到服务器
            
              只能上传jpg/png文件，且不超过500kb					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/zaji/5637280.html