腾讯云cos上传文件

需求 ：将文件上传到 cos中

官方文档

需提前备好 SecretId、SecretKey 配置信息 https://cloud.tencent.com/document/product/436/7751

1.先安装

npm i cos-js-sdk-v5 --save

2. 在需要的文件中引入，从后端获取查询COS临时密匙信息，传入创建的实例中

let cosStsData = fileManagementStore.cosStsData; //从后端获取查询COS临时秘钥信息

let cos = new COS({
    // 必选参数
    getAuthorization: function (options, callback) {
        // 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
        // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
        // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
        callback({
            TmpSecretId: cosStsData.Credentials.TmpSecretId,
            TmpSecretKey: cosStsData.Credentials.TmpSecretKey,
            SecurityToken: cosStsData.Credentials.Token,
            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
            StartTime: cosStsData.startTime, // 时间戳，单位秒，如：1580000000
            ExpiredTime: cosStsData.ExpiredTime // 时间戳，单位秒，如：1580000900
        });
    }
});

3.调用putObject方法把文件推到COS上

cos.putObject(
    {
        Bucket: cosStsData.Bucket  /* 必须 */,
        Region: cosStsData.Region /* 存储桶所在地域，必须字段 */,
        Key: `userImage/${cosStsData.ExpiredTime}${file.uid}${file.name}` /* 必须对象在存储桶中的唯一标识 */,
        Body: file // 上传文件对象
    },
    //回调处理
    function (err, data) {
        console.log(err || data);
        if (!err && data.statusCode == 200) {
            setFileName(file.name);
            setFileUrl(data.Location);
        }
    }
);

上传的全部代码

import React, { useState } from 'react';
import {  Button, Form, Upload, Icon, message } from 'antd';
import COS from 'cos-js-sdk-v5'; 


const CreateFileDrawer = props => {
    const { fileManagementStore } = props;
    const [fileUrl, setFileUrl] = useState();
    const [fileName, setFileName] = useState();

    const uploadProps = {
            beforeUpload: file => {
                let maxSize = 1024 * 1024 * 50;

                let index = file.name?.lastIndexOf('.');
                let type = file.name?.slice(index + 1);

                if (type === 'doc' || type === 'docx') {
                    type = 'word';
                }
                let pattern = /(pdf)|(word)$/;
                if (!pattern.test(type)) {
                    return message.error('文件格式不正确');
                }

                if (file.size > maxSize) {
                    return message.error('文件大小不能超过50M');
                }

                let cosStsData = fileManagementStore.cosStsData; //从后端获取查询COS临时秘钥信息

                let cos = new COS({
                    // 必选参数
                    getAuthorization: function (options, callback) {
                        // 服务端 JS 和 PHP 例子：https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
                        // 服务端其他语言参考 COS STS SDK ：https://github.com/tencentyun/qcloud-cos-sts-sdk
                        // STS 详细文档指引看：https://cloud.tencent.com/document/product/436/14048
                        callback({
                            TmpSecretId: cosStsData.Credentials.TmpSecretId,
                            TmpSecretKey: cosStsData.Credentials.TmpSecretKey,
                            SecurityToken: cosStsData.Credentials.Token,
                            // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                            StartTime: cosStsData.startTime, // 时间戳，单位秒，如：1580000000
                            ExpiredTime: cosStsData.ExpiredTime // 时间戳，单位秒，如：1580000900
                        });
                    }
                });

                cos.putObject(
                    {
                        Bucket: cosStsData.Bucket  /* 必须 */,
                        Region: cosStsData.Region /* 存储桶所在地域，必须字段 */,
                        Key: `userImage/${cosStsData.ExpiredTime}${file.uid}${file.name}` /* 必须对象在存储桶中的唯一标识 */,
                        Body: file // 上传文件对象
                    },
                    function (err, data) {
                        console.log(err || data);
                        if (!err && data.statusCode == 200) {
                            setFileName(file.name);
                            setFileUrl(data.Location);
                        }
                    }
                );
                return false;
            }
        };
        return (

                <Form labelCol={{ span: 24 }}>

                        <Form.Item label="文件">
                 
                                <Upload {...uploadProps}>
                                    <Button>
                                        <Icon type="upload" /> 上传文件
                                    </Button>
                                    <span style={{ marginLeft: '20px' }}>{fileName}</span>
                                </Upload>
                           
                            <p>支持pdf、word文件，文件大小不能超过50M</p>
                        </Form.Item>                   
                </Form>
        );
};