vue/react 腾讯云存储图片文件

前言

项目中图片不上传到服务器，采用第三方存储，本文采用的是腾腾讯云cos对象存储桶，该方法可以由前端实现上传图片文件，腾讯云会返回一个url地址，前端可以直接往后端存储一个url地址。

一、新建存储桶

登录腾讯云，点击产品，点击对象存储，新用户可以免费领取180天

选择一个地址，距离自己近的
创建一个桶名字
共有读私有写，谁都可以读取文件，添加需要秘钥
一直下一步，其他不需要配置

二、设置桶的跨域问题

三、vue/react项目中使用

安装SDK

npm i cos-js-sdk-v5 -save

在使用上传的页面使用

  // 图片上传腾讯云
  const COS = require('cos-js-sdk-v5');
  const cos = new COS({
    SecretId: '', // 身份识别ID
    SecretKey: '', // 身份秘钥
  });

    // 上传操作
    if (file) {
      cos.putObject(
        {
          Bucket: '', // 存储桶名
          Region: '', // 存储桶所在地域，必须字段
          Key: file.name, // 文件名
          StorageClass: 'STANDARD', // 上传模式，标准模式
          Body: file, // 上传文件对象
          // 当上传有进度的时候回调
          onProgress: (progressData) => {
            console.log(progressData);
          },
        },
        (err, data) => {
          console.log(err);
          // 上传成功
          if (data.statusCode === 200) {
            console.log(data.Location); // 上传成功时返回的url地址，存储到数据库
          }
        }
      );
    }

存储桶名称和存储桶所在地域

秘钥