SpringBoot+Vue实现阿里云oss服务端签名直传并设置上传回调

最新推荐文章于 2024-01-08 17:01:33 发布

luomo0203

最新推荐文章于 2024-01-08 17:01:33 发布

阅读量2.6k

点赞数 3

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/luomo0203/article/details/107949452

版权

SpringBoot 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

demo地址：
链接: aliyun_oss_upload.
1.upload.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .screenshot{
        margin-top: 80px;
        position: relative;
    }
</style>
<body>
<div id="app">
    <div>选择图片:<input type="file" ref="file"></div>
    <el-button type="primary" @click="getPolicy">上传</el-button>
    <!--图片部分-->
    <div id="screenshot" class="screenshot">
        <span v-for="(imgUrl, index) in srcList" :key="index" class="slideshow">
          <el-image style="width:175px; height: 116px"
                    :src="imgUrl"
                    :preview-src-list="srcList"
          />
        </span>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                srcList: []
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            getPolicy(){
                const that = this;
                // 获取阿里云上传签名
                axios.get('http://localhost:8080/aliyun/oss/policy')
                    .then(function (response) {
                     that.ossUpload(that.$refs.file.files[0],response.data.resultContent);
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            ossUpload(file,ossToken){
                const filename =file.name;
                let formData = new FormData();
                //注意formData里append添加的键的大小写
                console.log(ossToken)
                formData.append('key', ossToken.dir + filename); //存储在oss的文件路径
                formData.append('OSSAccessKeyId', ossToken.accessid); //accessKeyId
                formData.append('policy', ossToken.policy); //policy
                formData.append('Signature', ossToken.signature); //签名
                formData.append('callback', ossToken.callback); //回调
                formData.append('success_action_status', 200); //成功后返回的操作码
                //如果是base64文件，那么直接把base64字符串转成blob对象进行上传就可以了
                formData.append("file",file);
                axios.post(ossToken.host,formData,{
                    'Content-Type':'multipart/form-data'
                }).then(res=>{
                   console.log(res)
                    this.srcList.push(res.data.resultContent.filename);
                })

            }
        }
    })
</script>
</html>

2.签名生成

   public ResultBean getPolicy() {
        JSONObject resultBean = new JSONObject();
        // 存储目录
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String dir = ALIYUN_OSS_DIR_PREFIX+sdf.format(new Date())+"/";
        // 签名有效期
        long expireEndTime = System.currentTimeMillis() + ALIYUN_OSS_EXPIRE * 1000;
        Date expiration = new Date(expireEndTime);
        // 文件大小
        long maxSize = ALIYUN_OSS_MAX_SIZE * 1024 * 1024;
        // 回调
        OssCallbackParam callback = new OssCallbackParam();
        callback.setCallbackUrl(ALIYUN_OSS_CALLBACK);
        callback.setCallbackBody("filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}");
        callback.setCallbackBodyType("application/x-www-form-urlencoded");
        // 提交节点
        String action = "https://" + ALIYUN_OSS_ENDPOINT;
        try {
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, maxSize);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);
            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes("utf-8");
            String policy = BinaryUtil.toBase64String(binaryData);
            String signature = ossClient.calculatePostSignature(postPolicy);
            String callbackData = BinaryUtil.toBase64String(JSONUtil.parse(callback).toString().getBytes("utf-8"));
            resultBean.put("accessid",ossClient.getCredentialsProvider().getCredentials().getAccessKeyId());
            resultBean.put("policy",policy);
            resultBean.put("signature",signature);
            resultBean.put("dir",dir);
            resultBean.put("expire",String.valueOf(expireEndTime / 1000));
            resultBean.put("callback",callbackData);
            resultBean.put("host",action);
            // 返回结果
        } catch (Exception e) {
            LOGGER.error("签名生成失败", e);
            return new ResultBean(Constants.RESCODE_SIGNATION_FAILED,Constants.RESMSG_SIGNATION_FAILED);
        }
        return new ResultBean(Constants.RESCODE_SUCCESS,Constants.RESMSG_SUCCESS,resultBean);
    }
    ```

luomo0203

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot+Vue实现阿里云oss服务端签名直传并设置上传回调

demo地址：https://github.com/lihaijian-java/aliyun_oss_upload1.upload.html<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/the
复制链接

扫一扫