为了开法方法，小程序，公众号和前端使用相同接口，使用了vue作后台.

1:cos-nodejs-sdk-v5所需要环境版本不一致

为项目添加腾讯云对象存储时，安装sdk依赖:

npm i cos-nodejs-sdk-v5 --save

安装后，测试项目打包运行，报错如下：

WARNING Compiled with 1 warnings 5:30:40 PM

warning in ./node_modules/conf/dist/source/index.js

Module parse failed: Unexpected token (72:12)
You may need an appropriate loader to handle this file type.
| clearInvalidConfig: false,
| accessPropertiesByDotNotation: true,
| ...partialOptions
| };
| const getPackageData = onetime(() => {

...............

30 packages are looking for funding
run `npm fund` for details

found 184 vulnerabilities (151 low, 21 moderate, 12 high)
run `npm audit fix` to fix them, or `npm audit` for details

竞然有184处包需要升级，真是头大了前端开发三方库太多的问题。

npm audit fix

版本升级。

再次运行，无警告。

前的问题来了，在此次使用文件上传时，调用nodejs的fs，传入文件内容时，前端报错：

__WEBPACK_IMPORTED_MODULE_4_fs__.readFileSync is not a function

代码如下：相关代码如下：

import COS from 'cos-js-sdk-v5'
import * as fs from "fs";cos.putObject({Bucket: bucket,Region: region,Key: folder + filename,Body: fs.readFileSync(' /Users/mahui/Desktop/1/1.png'),}, function (err, data) {console.log('err='+JSON.stringify(err));console.log('data='+JSON.stringify(data));let path = 'https://' + bucket + '.cos.ap-shanghai.myqcloud.com' + folder + '' + filename + '';console.log('path='+path);loading.close();});

2:nodejs里的fs文件处理类不可在vue里直接调用。

根踪调试后发现：

console.log('fs='+JSON.stringify(fs));
console.log('fs.readFileSync='+fs.readFileSync);

打印数据如下：

fs={}
fs.readFileSync=undefined

vue不能直接调用nodejs里fs,看官方的nodejs的demo完全不对头，转过头来看了js的方法介绍，其实方式代码和nodejs sdk相似。底层都是js,略过后，直接使用。

在使用ui-element上资源时，需要通过upload组件中的File类的属性raw上传。
上传单张图片版本如下：

<template><div class="page-container"><!--工具栏--><div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;"></div><el-uploadaction="#":http-request="uploadFile":limit='1'list-type="picture":on-change="changeHandle":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFile">上传到服务器</el-button></el-upload></div>
</template><script>import vue from 'vue';import { Upload } from 'element-ui';import COS from 'cos-js-sdk-v5'vue.use(Upload)export default {data () {return {file: '',}},methods:{// 获取封面对象changeHandle (file, fileList) {console.log(file)this.file = file},//上传腾讯云uploadFile() {console.log('file='+JSON.stringify(this.file))console.log('file.raw='+JSON.stringify(this.file.raw))var bucket ='test-test-1305354732';var region = 'ap-shanghai';var cos = new COS({SecretId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',SecretKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',ProgressInterval: 1000 // 控制上传的 onProgress 回调的间隔});const _this = this;cos.putObject({Bucket: bucket,Region: region,Key: 'store9/' + new Date().getTime() + _this.file.name,StorageClass: 'STANDARD',Body: _this.file.raw, // 上传文件对象onProgress: progressData => {console.log(JSON.stringify(progressData))}}, function (err, data) {console.log('err='+JSON.stringify(err));console.log('data='+JSON.stringify(data));//let path = 'filename + '';//console.log('path='+path);});},},}</script><style scoped></style>

多图片版本如下：

<template><div class="page-container"><!--工具栏--><div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;"></div><el-uploadaction="#"multiple:limit='3'list-type="picture":on-change="changeHandle":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFile2">上传到服务器</el-button></el-upload></div>
</template><script>
import vue from 'vue';
import { Upload } from 'element-ui';
import COS from 'cos-js-sdk-v5'vue.use(Upload)export default {data () {return {fileList: [],}},methods:{// 获取封面对象changeHandle (file, fileList) {this.fileList = fileList;},getFileType:function (filePath){var startIndex = filePath.lastIndexOf(".");if(startIndex != -1)return filePath.substring(startIndex+1, filePath.length).toLowerCase();else return "";},uploadFile2() {var bucket ='test-test-1305354732';var region = 'ap-shanghai';var cos = new COS({SecretId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',SecretKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',// 可选参数FileParallelLimit: 9, // 控制文件上传并发数ChunkParallelLimit: 9, // 控制单个文件下分片上传并发数ProgressInterval: 1000 // 控制上传的 onProgress 回调的间隔});const _this = this;var uploadFiles = [];for(var i = 0; i < this.fileList.length; i++) {var fTemp = this.fileList[i];var upFile={Bucket: bucket, // Bucket 格式：test-1250000000Region: region,Key: 'store9/' + new Date().getTime() +i+'.'+ _this.getFileType(fTemp.name),Body: fTemp.raw};uploadFiles.push(upFile);}cos.uploadFiles({files: uploadFiles,SliceSize: 1024 * 1024*10,onProgress: function (info) {const percent = Math.floor(info.percent * 10000) / 100;const speed = Math.floor(info.speed / 1024 / 1024 * 100) / 100;console.log('进度：' + percent + '%; 速度：' + speed + 'Mb/s;');},onFileFinish: function (err, data, options) {console.log(options.Key + ' 上传' + (err ? '失败' : '完成'));},}, function (err, data) {console.log(err || data);});},},}</script><style scoped></style>

vue使用腾讯云对象存储碰到的坑相关推荐

vue 上传图片到腾讯云对象存储
需求:上传图片到腾讯云对象存储,返回图片链接地址. 大概流程: 腾讯云对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储 ...
硅谷课堂 06_整合腾讯云对象存储和课程分类管理
硅谷课堂第六天-整合腾讯云对象存储和课程分类管理文章目录硅谷课堂第六天-整合腾讯云对象存储和课程分类管理一.讲师管理模块整合腾讯云对象存储 1.腾讯云对象存储介绍 1.1.开通"对象存 ...
腾讯云cos html,Docsify+腾讯云对象存储 COS，一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
硅谷课堂第五课-腾讯云对象存储和课程分类管理
硅谷课堂第六天-整合腾讯云对象存储和课程分类管理文章目录硅谷课堂第六天-整合腾讯云对象存储和课程分类管理一.讲师管理模块整合腾讯云对象存储 1.腾讯云对象存储介绍 1.1.开通"对象存 ...
腾讯云对象存储 python_python 云存储
广告关闭云服务器1核2G首年99年,还有多款热门云产品满足您的上云需求存储桶 bucketxml python sdk 存储桶名称由两部分组成:用户自定义字符串和 appid,两者以中划线&qu ...
腾讯云对象存储 python_GitHub - fushall1104/cos-python3-sdk: 腾讯云对象存储服务（cos）Python3.5版本SDK...
cos-python3-sdk 腾讯云对象存储服务(cos)Python3.5版本SDK *此版本非官方版本项目进展:开发完成(分片上传待测试) 项目的来由:做基于Django个人网站时,采用了腾讯 ...
基于hadoop构建对象存储系统_Hadoop社区正式支持腾讯云对象存储COS
8月4日消息,知名大数据开源社区Hadoop近日宣布对腾讯云对象存储COS的正式支持.后续,开发者在基于Hadoop架构进行大数据分析时,能够在不修改代码的情况下,无缝高效地使用腾讯云COS来处理海量 ...
electron 使用json作为本地存储_使用腾讯云对象存储 COS 作为 Velero 后端存储，实现集群资源备份和还原...
Velero(以前称为 Heptio Ark)是一个开源工具,可以安全地备份和还原,执行灾难恢复以及迁移 Kubernetes 集群资源和持久卷,可以在 TKE 集群或自建 Kubenetes 集群中 ...
腾讯云对象存储的完整教程，java将文件上传到腾讯云上后返回可以访问的连接
先前使用的是七牛云,是挺好用的,但是七牛对于测试域名有一个月的时间限制.测试域名失效后上传的图片等文件就不能访问了.但是腾讯云每个注册的账户有50G的对象存储的空间.而且没有时间限制.所以就采用腾讯的 ...

vue使用腾讯云对象存储碰到的坑

1:cos-nodejs-sdk-v5所需要环境版本不一致

2:nodejs里的fs文件处理类不可在vue里直接调用。

vue使用腾讯云对象存储碰到的坑相关推荐

最新文章

热门文章