JS上传图片文件到腾讯云对象存储COS

最新推荐文章于 2024-08-08 10:50:39 发布

qzxl

最新推荐文章于 2024-08-08 10:50:39 发布

阅读量2.8k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/to10086/article/details/108132642

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

上传图片到腾讯云主要有两个步骤：
1、鉴权
2、开始上传
需要引入两个JS文件：cos-js-sdk-v5.min.js和jquery-2.1.4.min.js，这两个文件的链接我已放在后面。
鉴权可以直接使用SecretId和SecretKey生成cos对象，但把SecretId和SecretKey暴露在前端页面这样不太安全，我们采用从服务端申请临时秘钥的方式生成cos对象。 上传成功后的图片链接也可以通过域名+自定义key拼接生成，如下。
前端页面全部代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>腾讯云COS图片上传</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="cos-js-sdk-v5.min.js"></script>
</head>
<body>
<input type="file" accept="image/*" id="file_upload" value="" multiple/>

<div class="image_container">
    <img id="preview" style="height:130px;width:117px;border-width:0px;"/>
</div>
</body>
<script>
    //腾讯云对象存储
    var cos = new COS({
        // 必选参数
        getAuthorization: function (options, callback) {
            $.ajax({
                method: 'GET',
                url: 'http://localhost:8080/shortTimeSignatureSDK',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Content-Type', 'application/json');
                },
                dataType: 'json',
                success: function (data) {
                    var credentials = data && data.credentials;
                    if (!data || !credentials) return console.error('credentials invalid');
                    callback({
                        TmpSecretId: credentials.tmpSecretId,
                        TmpSecretKey: credentials.tmpSecretKey,
                        XCosSecurityToken: credentials.sessionToken,
                        // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                        StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                        ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
                    });
                }
            });
        }
    });

    function checkImage(file) {
        const isIMAGE = file.type === 'image/jpeg' || 'image/jpg' || 'image/png';
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (!isIMAGE) {
            alert('上传文件只能是图片格式!')
        }
        if (!isLt1M) {
            alert('上传文件大小不能超过 1MB!')
        }
        return isIMAGE && isLt1M
    }


    const domainUrl = "https://live-cover-picture-1256967716.cos.ap-chengdu.myqcloud.com/"

    $(function () {
        $("#file_upload").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var imgList = []
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var $img = $("#preview");
            //图片预览
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $img.attr('src', dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("preview");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
            // let fileObject = fileObj.files[0]
            let timestamp, imgTmp, key;
            for (i = 0; i < fileObj.files.length; i++) {
                timestamp = (new Date()).getTime()
                imgTmp = fileObj.files[i]
                if (checkImage(imgTmp)) {
                    cos.putObject({
                        Bucket: 'live-cover-picture-1256967716',
                        Region: 'ap-chengdu',
                        Key: timestamp .toString(), /* 必须 */
                        StorageClass: 'STANDARD',
                        Body: imgTmp, // 上传文件对象
                        onProgress: function (progressData) {
                            console.log(JSON.stringify(progressData));
                        }
                    }, function (err, data) {
                        console.log(err || data);
                        console.log("上传成功的图片链接为："+(domainUrl+timestamp.toString()))
                    });
                } else {
                    alert("上传文件格式错误")
                }
            }
        });

    });

</script>
</html>

其中生成cos对象请求生成临时秘钥的接口http://localhost:8080/shortTimeSignatureSDK的后端代码如下：
注意将下面的secretId和secretKey换成自己的。

    @RequestMapping(value = "/shortTimeSignatureSDK", method = RequestMethod.GET)
    @ResponseBody
    public String getShortTimeSignatureSDK() {
        TreeMap<String, Object> config = new TreeMap<String, Object>();
        try {
            // 云 API 密钥 secretId
            config.put("secretId", "换成自己的secretId");//
            // 云 API 密钥 secretKey
            config.put("secretKey", "换成自己的secretKey");//
            //若需要设置网络代理，则可以如下设置
//            if (properties.containsKey("https.proxyHost")) {
//                System.setProperty("https.proxyHost", properties.getProperty("https.proxyHost"));
//                System.setProperty("https.proxyPort", properties.getProperty("https.proxyPort"));
//            }

            // 临时密钥有效时长，单位是秒
            config.put("durationSeconds", 1800);

            // 换成你的 bucket
            config.put("bucket", "live-cover-picture-1256967716");//ad-picture-1256967716
            // 换成 bucket 所在地区
            config.put("region", "ap-chengdu");
            config.put("allowPrefix", "*");

            // 密钥的权限列表。简单上传和分片需要以下的权限，其他权限列表请看 https://cloud.tencent.com/document/product/436/31923
            String[] allowActions = new String[]{
                    // 简单上传
                    "name/cos:PutObject",
                    // 表单上传
                    "name/cos:PostObject",
//                    // 分片上传： 初始化分片
//                    "name/cos:InitiateMultipartUpload",
//                    // 分片上传： 查询 bucket 中未完成分片上传的UploadId
//                    "name/cos:ListMultipartUploads",
//                    // 分片上传： 查询已上传的分片
//                    "name/cos:ListParts",
//                    // 分片上传： 上传分片块
//                    "name/cos:UploadPart",
//                    // 分片上传： 完成分片上传
//                    "name/cos:CompleteMultipartUpload"
            };
            config.put("allowActions", allowActions);
            // 请求临时密钥信息

            org.json.JSONObject credential = CosStsClient.getCredential(config);
            // 请求成功：打印对应的临时密钥信息
            System.out.println(credential.toString(4));
            return credential.toString();
        } catch (Exception e) {
            // 请求失败，抛出异常
            throw new IllegalArgumentException("no valid secret !");
        }
    }