vue 使用腾讯云 cos存储 上传

参考文档：https://blog.csdn.net/qq_34170840/article/details/124520388

1、页面部分

点击查看代码

   <input ref="fileRef" title="" type='file' name="file" multiple class="file-input"
            @change="uploadStart($event, value)" accept="image/png, image/jpeg, .svs" />

2、js部分

点击查看代码

import COS from 'cos-js-sdk-v5'
// 后端提供
var cos = new COS({
  SecretId: 'AKIDFestgFbingLchZEguulU1MWSBgxzmLfk',
  SecretKey: 'tY2OYVFm7FBuQkqkSxFUYR7bt43qQnxz',
});

const uploadStart = (e) => {
  let file = e.target.files && e.target.files[0];
  if (!file) {
    document.getElementById('msg').innerText = '未选择上传文件';
    return;
  }
  console.log(file, cos);
  handleFileInUploading(file);
  /* 直接调用 cos sdk 的方法 */
}

const handleFileInUploading = (file) => {
  cos.uploadFile({
  	// 后端提供
    Bucket: 'prd-bdgj-1253531169', /* 填写自己的 bucket，必须字段 */
    Region: 'ap-shanghai-fsi',     /* 存储桶所在地域，必须字段 */
    Key: file.name,              /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
    Body: file, // 上传文件对象
    // SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
    onProgress: function (progressData) {
      console.log(JSON.stringify(progressData));
    }
  }, function (err, data) {
    if (err) {
      console.log('上传失败', err);
    } else {
      console.log('上传成功');
    }
  });