javaScript前端上传文件到腾讯云（对象存储）

需要分析 因服务器部署前后端前端TG 后端HK。上传一个文件需要的时间太长，导致的是用户体验太差。所以由前端将文件上传到服务器，将文件上传到阿里云或者腾讯云上，我们需要的时候将URL拿到就可以，这样是速度最快的。

第一步下载cos 使用之前先将js下载下来：

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

第二步创建一个uploadFile.js

// npm install cos-js-sdk-v5
import COS from cos-js-sdk-v5
import env from @/api/env;
import {
          
    setSessionStorage, getSessionStorage } from ./storage
// 定义一个cos 对象
const cos = new COS({
          
   
  // getAuthorization 必选参数
  getAuthorization: async (options, callback) => {
          
   
    // 异步获取临时密钥
    axios.post(env[starLink] + /sysUploadFile/getAuthorization).then(({
           
     data }) => {
          
   
      if (data.code === 200) {
          
   
        setSessionStorage("cosList", JSON.stringify(data.rows));
        callback({
          
   
          TmpSecretId: data.rows.cred.cOSAccessKeyId,
          TmpSecretKey: data.rows.cred.cOSSecretKey,
          XCosSecurityToken: data.rows.securityToken,
          ExpiredTime: 1800,
          ScopeLimit: true, // 细粒度控制权限需要设为 true，会限制密钥只在相同请求时重复使用
        });
      } else {
          
   
        this.$message.error(data.info)
      }
    }).catch(err => {
          
   
    })
  }
});
var cdn = {
          
   
  uploadAPIFile: (key, file, fn) => {
          
   
    if (!file) return;
    const cosList = JSON.parse(getSessionStorage(cosList))
    cos.putObject(
      {
          
   
        Bucket: cosList.bucket,  //存储桶用户识别   （必须有）
        Region: cosList.clientConfig.region.regionName,     //地区识别（必须有）
        Key: `${
            
     key}${
            
     file.name}`, // 图片名称
        Body: file,
      },
      function (err, data) {
          
   
        /*这里是为了调试你的代码，能够拿到报错信息*/
        if (err) {
          
   
          this.error(file)
          fn(false)
        } else {
          
   
          let cosUrl = `http://${
            
     data.Location}`
          fn(cosUrl)
        }
      }
    );
  },
 // delAPIFile: (key, file, fn) => {
          
   
 // 	删除 等就按照正常官网文档编写
 // }
}
export default cdn

第三步所需组件引入

import cdn from "./../../public/upload";

第四步使用

cdn.uploadAPIFile(, fileobj.file, (val) => {
          
   
    if (val) {
          
   
	  	this.imgUrl = val;
  		this.imgLoading = false;
     	this.$emit("update:imgUrl", val)
     	this.$emit("issuccess", val)
     	console.log(val)
   	} else {
          
   
    	 console.log(111111111111111)
   	}
 })