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)}})

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

前端上传文件到腾讯云（对象存储）
好吧,没写之前简单的说一下为什么要写,我还是怀着比较沉重的心情写的这篇教程,主要是心里没底,不知道能写明白不,不过既然提笔了,那就硬着头皮写吧,没办法,毕竟跌跌撞撞总算是搞出来了.还有就是我百度了,没 ...
小程序用thinkPHP上传文件到腾讯云对象存储空间
<?php/*** Created by PhpStorm.* User: Administrator* Date: 2017/11/22* Time: 10:48*/namespace Hom ...
通过COS上传文件至腾讯云
最近看了一下上传文件至腾讯云.腾讯官方提供的API,cloud.tencent.com/document/pr- 文档上传文档上传首页要首先引入腾讯云封装好的cos-js-sdk-v5.js文件,然 ...
上传文件到腾讯云存储桶
上传文件到腾讯云存储桶一,配置腾讯云Cos 流程图第一步,注册腾讯云账号第二步,选择帐户填写个人信息第三步扫码授权手机端授权第四步点击免费产品五步选择对象存储Cos 六步开通服务七步 ...
本地WinSCP上传文件到腾讯云服务器显示Permission Denied
本地WinSCP上传文件到腾讯云服务器显示 Permission Denied 从字面看,就是没有权限.这时我首先想到了腾讯云服务器的安全组.先去设置安全组. 1.设置安全组我们用的是腾讯的云服务器 ...
上传excel腾讯云服务器,使用SpringBoot上传文件到腾讯云
最近在做一个项目,涉及到腾讯云上传文件/图片到服务器,为了图方便并且提升访问速度,想着上传到腾讯云存储桶是一个不错的选择.腾讯云存储桶的创建可见我之前的文章. 当然存储桶里面不仅可以存图片,也可以存储 ...
ios腾讯云文件服务器,使用axios 上传文件到腾讯云
在网上看到的好多的都是使用七牛的,花了一点时间看了下腾讯的. 不管那个云服务都是客户端通过自己的key 进行加密,服务器解密查看是否有资格,然后进行传输. 使用腾讯云的对象存储. 整个流程: 腾讯 ...
git上传文件到腾讯云服务器,我的hexo部署到腾讯云服务器
最近发现腾讯云搞活动,然后就心血来潮买了个服务器,感觉是挺便宜的(肯定是腾讯的套路),还续费了2年,希望自己能玩好这台服务器.昨天刚买完之后,一直在想不知道用来干嘛,想到现在还是不清楚要搞些撒东西出来 ...
vue 上传视频到腾讯云存储并获取视频第一帧
官网文档链接:https://cloud.tencent.com/document/product/436/6268 需求项目里之前上传视频是调后端接口,接口将视频保存到服务器,然后返回视频链接. ...
微信小程序基于腾讯云对象存储的图片上传
在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到 ...

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

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

最新文章

热门文章