萧寂

html上传图片至腾讯云文件存储

文档:https://cloud.tencent.com/document/product/436/64960
html
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>COS 直传 demo</title>
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 1. 官方 SDK -->
    <script src="https://cdn.statically.io/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
    <style>
        body {
            font-family: PingFang SC, Helvetica;
            margin: 0;
            padding: 1rem;
            background: #f5f5f5
        }

        .box {
            background: #fff;
            padding: .8rem;
            border-radius: .3rem;
            text-align: center
        }

        img {
            max-width: 100%;
            margin-top: .8rem;
            border-radius: .3rem
        }

        button {
            background: #0066ff;
            color: #fff;
            border: none;
            padding: .5rem 1.2rem;
            border-radius: .3rem;
            font-size: .9rem
        }

        .url {
            color: #0066ff;
            word-break: break-all;
            margin-top: .5rem
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>腾讯云 COS 直传示例</h3>
        <button id="btn">选择图片并上传</button>
        <div id="result"></div>
    </div>

    <script>
        /* =========  配置区 – 改成你自己的 ========= */
        const CONFIG = {
            Bucket: '', // 存储桶，必须字段
            Region: '', // 存储桶所在地域，必须字段
            TmpSecretId: '', // 密钥的 SecretId，必须字段
            TmpSecretKey: '', // 密钥的 SecretKey，必须字段
            Dir: '', // 上传目录，如 h5/
            Token: '', // 临时密钥的 Token，必须字段
            StartTime: 1758676512, // 建议传入服务端开始时间，可避免客户端时间不准导致的签名错误
            ExpiredTime: 1758762912, // 临时密钥过期时间
        };
        /* ======================================== */

        // 初始化 COS
        const cos = new COS({ SecretId: CONFIG.TmpSecretId, SecretKey: CONFIG.TmpSecretKey, SecurityToken: CONFIG.Token, StartTime: CONFIG.StartTime, ExpiredTime: CONFIG.ExpiredTime });

        // 工具：生成唯一文件名
        const genKey = name => CONFIG.Dir + Date.now() + '-' + Math.random().toString(36).slice(2) + '.' + name.split('.').pop();

        // 上传函数
        function upload(file) {
            console.log('开始上传：', genKey(file.name));
            const Key = genKey(file.name);
            cos.uploadFile({
                Bucket: CONFIG.Bucket,
                Region: CONFIG.Region,
                Key,
                Body: file,
                onProgress: p => console.log('进度：' + (p.percent * 100).toFixed(0) + '%')
            }, (err, data) => {

                if (err) {
                    console.log('err', err);
                    return alert('上传失败：' + err.message);
                }
                console.log('上传成功，返回数据为：', data);
                const url = 'https://' + data.Location;
                document.getElementById('result').innerHTML =
                    `<p>上传成功！</p><img src="${url}" /><p class="url">${url}</p>`;
            });
        }

        // 点击按钮
        document.getElementById('btn').onclick = () => {
            const ipt = document.createElement('input');
            ipt.type = 'file'; ipt.accept = 'image/*'; ipt.onchange = ({ target }) => target.files[0] && upload(target.files[0]);
            ipt.click();
        };
    </script>
</body>

</html>
html上传图片至腾讯云文件存储 ​

html上传图片至腾讯云文件存储
