5分钟教你使用腾讯云上传文件

ゝ一纸荒年。 2023-01-21 05:19 79阅读 0赞

### 获取API密钥 ###

[腾讯云密钥api][api]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]  
获取您的项目 SecretId 和 SecretKey。  
建议保存至本地

### 安装 SDK ###

这里我们使用的JavaScript SDK

script引入方法：

webpack 引入方式

通过`npm i cos-js-sdk-v5 --save`安装 SDK 依赖，支持 webpack 打包的场景，您可以用 npm 引入作为模块，代码如下:

var COS = require('cos-js-sdk-v5') 
    或
    import COS from 'cos-js-sdk-v5'

### 使用 ###

HTML文件

<input id="file-selector" type="file">
    <script src="dist/cos-js-sdk-v5.min.js"></script>
    <script>
    var cos = new COS({
        SecretId: 'COS_SECRETID', // 身份识别 ID
        SecretKey: 'COS_SECRETKEY', // 身份密钥
    });
    var Bucket = 'examplebucket-1250000000'; /*存储桶名称*/
    var Region = 'COS_REGION';     /* 存储桶所在地域，必须字段 */
    cos.putObject({
              Bucket: Bucket , // 存储桶
              Region: Region , // 地域
              Key: name, // 文件名
              Body: data, // 要上传的文件对象
              StorageClass: 'STANDARD', // 上传的模式类型 直接默认 标准模式即可
              onProgress: (progressData) => {
                this.percent = progressData.percent * 100
              }
            }, (err, data) => {
              console.log(err || data)
            })
    </script>

Vue中：

<el-upload
          list-type="picture-card"
          :limit="4"
          action="#"
          :file-list="fileList"
          :on-change="change"
          :on-preview="preview"
          :accept="typeList"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
    
     <el-progress
          v-show="showPercent"    // 是否显示
          style="width: 180px"
          :percentage="percent"  //进度  data中有定义
        />

其他操作可看官方文档  
[腾讯云对象存储文档][Link 1]

[api]: https://console.cloud.tencent.com/cam/capi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221020/d50b8f89a5884324b55bc4b3be3ba451.png
[Link 1]: https://cloud.tencent.com/document/product/436/11459