如何完成上传图片到腾讯云

这个是官方文档里面的属性,

upload(params){

console.log(params)

}

下面是参数打印出来的结果:

将图片上传到腾讯云:

1.安装依赖:npm i cos-js-sdk-v5 --save

2. 在你的组件中加入如下代码:实例化cos代码

// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({SecretId: 'xxx', // 身份识别IDSecretKey: 'xxx' // 身份秘钥
})

3.实现头像上传的整段代码,

https://cloud.tencent.com/document/product/436/35649#.E7.AE.80.E5.8D.95.E4.B8.8A.E4.BC.A0.E5.AF.B9.E8.B1.A1 这个是腾讯云文档链接

<template><el-uploadclass="avatar-uploader"action="#"
用来指定文件要上传的地址，由于我们需要定制上传动作（我们要上传到腾讯云cos）,这里设为#:show-file-list="false":on-success="handleAvatarSuccess":http-request="upload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload>
</template>
<script>
// 下面的代码是固定写法
const COS = require('cos-js-sdk-v5')
// 填写自己腾讯云cos中的key和id (密钥)
const cos = new COS({SecretId: 'xxxxxxxxxxxx', // 身份识别IDSecretKey: 'xxxxxxxxxxxxxxxxxxxxxxx' // 身份秘钥
})
export default {name: 'Upload',data() {return {imageUrl: ''}},methods: {handleAvatarSuccess(res, file) {this.imageUrl = URL.createObjectURL(file.raw)},// 头像上传upload(params) {//   console.log(params)if (params.file) {cos.putObject({Bucket: '123-1306404211', /* 存储桶 */Region: 'ap-nanjing', /* 存储桶所在地域，必须字段 */Key: params.file.name, /* 文件名 */StorageClass: 'STANDARD', // 上传模式, 标准模式Body: params.file // 上传文件对象}, (err, data) => {console.log(err || data)if (data.statusCode === 200) {this.imageUrl = `https:${data.Location}`  //写到这,图片已经可以看到啦}})}}}
}
</script>

添加上传进度条,腾讯云文档上有这个,onPregress上传文件的进度回调函数，回调参数为进度对象 progressData

这个是progressData的打印结果:

注意:上面代码this的指向会出问题,是undefined,写成箭头函数就没错了!

onProgress: (progressData) => {console.log(this) this.percentage = progressData.percent * 100  //这句是给上传加个进度条console.log(JSON.stringify(progressData))}

4. 来说下v-model:

<com v-model="imageUrl" />

上面的写法等价于:
<com :value="imageUrl" @input="val=>imageUrl=val" />

在项目中使用 :

1.父组件中:

2.子组件中:

最后补充一个知识:

注册全局组件:

如何完成上传图片到腾讯云相关推荐

图片上传成功但是图片显示不出来_小程序上传图片到腾讯云
这是小程序开发第二篇,主要介绍如何上传图片到腾讯云,之所以选择腾讯云,是因为腾讯云免费空间大准备工作上传图片主要是将图片上传到腾讯云对象存储(COS). 要使用对象存储 API,需要先执行以下步骤 ...
uni-app上传图片到腾讯云
uni-app上传图片到腾讯云(对象存储) 客户端,先从后端请求到上传的链接,再直接上传图片到腾讯云的对象存储. 1.文件base-util.js的内容: function chooseImageFr ...
微信小程序/网站上传图片到腾讯云COS
COS简介: 腾讯云提供的一种对象存储服务,供开发者存储海量文件的分布式存储服务.可以将自己开发的应用的存储部分全部接入COS的存储桶中,有效减少应用服务器的带宽消耗等.个人也可以通过腾讯云账号免费使 ...
vue 上传图片到腾讯云对象存储
需求:上传图片到腾讯云对象存储,返回图片链接地址. 大概流程: 腾讯云对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储 ...
upload上传图片到腾讯云，如何上传图片
讲解一下如何上传图片到腾讯云,上传到其他第三方云盘操作也是大致一样的: 一:首先需要拥有一个账号(有的直接可以跳过看后面) 1.创建一个腾讯云账号,跟着提示操作即可(必须实名-为了安全),中间选择对 ...
使用微信js sdk关于选择及上传图片至腾讯云COS
使用微信js sdk关于选择及上传图片至腾讯云COS 使用微信js sdk关于选择及上传图片至腾讯云COS 背景名词参考效果图展示开发步骤 1:概要步骤 2:上代码结束: 使用微信js sd ...
uniapp上传图片到腾讯云COS
使用第三方总是非常麻烦的,这里使用uniapp的条件编译,给大家带来微信小程序的上传图片以及H5的上传图片到腾讯云COS 毕竟文档很难看,由于进行了封装,在最后再显示完整代码首先解决H5的上传 ...
腾讯云服务器怎么搭建ssm项目,SSM 项目如何上传图片到腾讯云COS？
-------------------- 个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:[http://zwd596257180.gitee. ...
php上传图片（腾讯云对象存储）
public function cosPub(){ //引入腾讯云的文件 autoload.php'$secretId = ""; //"云 API 密钥 SecretI ...

如何完成上传图片到腾讯云

将图片上传到腾讯云:

注册全局组件:

如何完成上传图片到腾讯云相关推荐

最新文章

热门文章