深圳马的 50G 半年免费对象存储，你确定不要吗？

本文链接：https://blog.csdn.net/weixin_46475440/article/details/116790124

腾讯云对象存储实现文件上传（前端实现过程）

使用步骤：

登录或注册腾讯云账号
然后进行实名认证
搜索对象存储并开通（新用户免费送50G）
找到存储桶列表创建存储桶
创建秘钥
- 进入控制台
- 搜索访问管理并进入
- 新建秘钥
- 等待创建成功
  
  SecretId，SecretKey 分别为秘钥id 和keykey值显示需要进行验证
设置跨域
- 点击对象存储中的存储桶列表，再点击存储桶列表中的，某个存储桶名称
- 点击安全管理=>跨域访问CORS
- 规则设置为（ * ）代表所有请求都能访问
查阅SDK文档，熟悉方法使用
引入cos-js-sdk-v5 插件并创建 COS SDK 实例

文档：https://cloud.tencent.com/document/product/436/11459

基础操作

简单上传对象

功能说明

PUT Object 接口可以上传一个对象至指定存储桶中。该操作需要请求者对存储桶有 WRITE 权限。

注意：

Key（文件名）不能以/结尾，否则会被识别为文件夹。
每个主账号（即同一个 APPID），存储桶的 ACL 规则数量最多为1000条，对象 ACL 规则数量不限制。如果您不需要进行对象 ACL 控制，请在上传时不要设置，默认继承存储桶权限。
上传之后，您可以用同样的 Key 生成预签名链接（下载请指定 method 为 GET，具体接口说明见下文，分享到其他端来进行下载。但注意如果您的文件是私有读权限，那么预签名链接只有一定的有效期。

使用示例

简单上传文件，适用于小文件上传。

cos.putObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'exampleobject',              /* 必须 */
   StorageClass: 'STANDARD',
   Body: fileObject, // 上传文件对象
   onProgress: function(progressData) {
       console.log(JSON.stringify(progressData));
   }
}, function(err, data) {
   console.log(err || data);
});

上传字符串作为文件内容：

cos.putObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'exampleobject',              /* 必须 */
   Body: 'hello!',
}, function(err, data) {
   console.log(err || data);
});

创建目录：

cos.putObject({
   Bucket: 'examplebucket-1250000000', /* 必须 */
   Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
   Key: 'examplefolder/',              /* 必须 */
   Body: '',
}, function(err, data) {
   console.log(err || data);
});

上传文件到指定目录：

var folder = 'examplefolder/';
cos.putObject({
  Bucket: 'examplebucket-1250000000', /* 必须 */
  Region: 'COS_REGION',     /* 存储桶所在地域，必须字段 */
  Key: folder + 'exampleobject',              /* 必须 */
  Body: fileObject, // 上传文件对象
  onProgress: function(progressData) {
      console.log(JSON.stringify(progressData));
  }
}, function(err, data) {
  console.log(err || data);
});

详细内容请查看官方文档

https://cloud.tencent.com/document/product/436/35649

一、原生Javascript文件上传源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .file-box {
      position: relative;
      display: inline-block;
      width: 100px;
      height: 100px;
      background: url('uploadPc.png')no-repeat;
      background-size: 100px 100px;
    }

    #input_file {
      width: 100%;
      height: 100%;
      opacity: 0;
      filter: alpha(opacity=0);
    }
  </style>
</head>

<body>
  <div class="file-box">
    <input type="file" value="" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
  </div>
  <img id="img" src="" alt="">
</body>
<script src="https://unpkg.com/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
<script>
  // 实例化COS对象验证 API 秘钥
  var cos = new COS({
    SecretId: 'AKID99uOcZFeZonVw60',  // 秘钥 ID
    SecretKey: 'dj7E5fz2oJYWD',   // 秘钥的 KEY
  });
  let input = document.querySelector('#input_file')
  let img = document.querySelector('#img')
  input.addEventListener('change', function () {
    cos.putObject({
      Bucket: '1305895829', /* 存储桶名称 必须 */ 
      Region: 'ap-beijing',     /* 存储桶所在地域，必须字段 */
      Key: 'hhh',              /*文件名称 必须 */
      StorageClass: 'STANDARD', // 默认
      Body: this.files[0], // 上传文件对象
      onProgress: function (progressData) {
        // 此函数为 文件上传的实时进度，可以利用此函数完成上传进度条
        console.log(progressData);
      }
    }, function (err, data) {
      console.log(err || data);
      // data为上传完成后返回数据，里面含上传后的线上地址
    });
  })
</script>

</html>

二、Vue 的文件上传源码

借助elementUI组件实现

<template>
  <div class="uploadAvater">
    <el-upload
      action="#"
      :http-request="uploadAvater"
      :on-preview="handlePictureCardPreview"
      list-type="picture-card"
      accept="image/*"
      :on-change="fileChange"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKID99uOcZFeonVw60', // 身份识别 ID 
  SecretKey: 'dz4tSgE5fz2oJYWD', // 身份密钥 
});
const Bucket = '895829'
const Region = 'ap-beijing'
export default {
  props: ["userid"],
  data () {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    };
  },
  created () {
    this.getUserPic()
  },
  methods: {
    // 根据用户ID查询所上传的图片
    getUserPic () {
      cos.getBucket({
        Bucket, /* 必须 */
        Region,     /* 存储桶所在地域，必须字段 */
        Prefix: '',           /* 非必须 */
        EncodingType: 'url'
      }, (err, data) => {
        if (err) return this.$message.error(err)
        data.Contents.forEach(item => {
          if (item.Key.split('_')[1] == this.userid) {
            cos.getObjectUrl({
              Bucket, /* 必须 */
              Region,     /* 存储桶所在地域，必须字段 */
              Key: item.Key,               /* 必须 */
            }, (err, data) => {
              if (err) return this.$message.error(err)
              let obj = {
                name: item.Key,
                url: data.Url
              }
              this.fileList.push(obj)
            });
          }
        })
      })
    },
    // 图片上传前
    beforeUpload (file) {
      if (file.type.split('/')[0] != 'image') {
        this.$message.error('只能上传图片')
        return false
      }
      if (file.size > (1024 * 1024 * 1)) {
        this.$message.error('图片大小不能超过1MB')
      }
      // return false
    },
    // 图片删除时
    handleRemove (file, fileList) {
      // console.log(file, fileList);
      cos.deleteObject({
        Bucket,
        Region,
        Key: file.name
      }, (err, data) => {
        console.log(err || data)
      })
    },
    // 图片上传变化时
    fileChange (file, fileList) {
      this.fileList = fileList
    },
    // 图片查看大图
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 图片上传
    uploadAvater (params) {
      if (params.file) {
        cos.putObject({
          Bucket, /* 必须 */
          Region,     /* 存储桶所在地域，必须字段 */
          Key: 'avater' + '_' + this.userid + '_' + Date.now(),              /* 必须 */
          StorageClass: 'STANDARD',
          Body: params.file, // 上传文件对象
          onProgress: function (progressData) {
            console.log(progressData);
          }
        }, (err, data) => {
          if (err) return this.$message.error(err)
          this.fileList[this.fileList.length - 1] = {
            name: data.Location.split('/')[1],
            url: 'http://' + data.Location
          }
        });
      }
    }
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #6a6969;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>