upload上传图片到腾讯云，如何上传图片

讲解一下如何上传图片到腾讯云，上传到其他第三方云盘操作也是大致一样的；

一：首先需要拥有一个账号（有的直接可以跳过看后面）

1.创建一个腾讯云账号，跟着提示操作即可(必须实名-为了安全)，中间选择对象存储cos，这里就创建好了；

2.接下来需要创建存储桶，里面的权限为：公有读，私有写；

3.设置cors规则，AllowHeader配置成* 号，这里存储桶也创建好了；

二：封装一个上传组件

这里使用到element组件库中的Upload来进行上传；

Upload使用可以对照着文档来-并结合我给出的代码；

项目中需要安装 cos-js-sdk-v5 --save 腾讯云包才能上传；

页面引入并创建实例，配置储存桶密钥-》再云产品-》访问密钥

下面这是一个完整的封装，可以直接粘贴复制使用；

<template><div><!--必填：action：指定上传地址file-list：必备数组管理图片样式：list-type 影响渲染样式，指定 pictur-card 照片墙钩子：on-preview 图片被点击时触发函数，绑定会出现放大镜，需要自己显示弹窗on-remove 删除图片时触发的功能on-change 修改图片触发的函数--><el-uploadaction="#"list-type="picture-card":file-list="fileList":on-preview="onPreview":on-remove="onRemove":on-change="onChange":http-request="httpRequest":before-upload="beforeUpload":class="{hasImg:fileList.length>0}"><i class="el-icon-plus" /></el-upload><el-progress v-if="isShowPercent" :text-inside="true" :stroke-width="16" :percentage="percent" style="width:146px;" /><el-dialog title="预览" :visible="isShowDialog" @close="isShowDialog=false"><el-row type="flex" justify="center"><img :src="previewImg" alt=""></el-row></el-dialog></div>
</template><script>
// 引入对象储存工具库，创建实例
import COS from 'cos-js-sdk-v5'
// 前端使用固定密钥计算签名，该格式适用于前端调试
const cos = new COS({SecretId: '密钥号',SecretKey: '密钥密码'
})
export default {name: 'Dashboard',data() {return {isShowPercent: false,percent: 0,isShowDialog: false,previewImg: '',// 文件列表每个对象都是一张图片，url：显示图片路径，udi：唯一标识，status：状态fileList: []}},methods: {// 点击文件列表中已上传的文件时的钩子，放大镜onPreview(file) {this.previewImg = file.url // 显示图片this.isShowDialog = true // 弹窗},// 移除文件时的钩子onRemove(file, newFileList) {this.fileList = newFileList},// 添加，上传成功/失败 都会触发onChange(file, newFileList) {// 由于 fileList 的绑的是单向的，需要手动替换this.fileList = newFileList},// 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。beforeUpload(file) {console.log('上传前触发')console.log(file)// 校验格式const typeList = ['image/jpeg', 'image/png', 'image/gif']if (!typeList.includes(file.type)) {this.$message.error('目前只支持 jpg/png/gif 图片格式')return false}// 校验大小const maxSize = 5 * 1024 * 1024if (file.size > maxSize) {this.$message.error('图片大小不能超过 5M')return false}},// 覆盖默认的上传行为，可以自定义上传的路径httpRequest(params) {// 开始上传时显示进度条this.isShowPercent = truecos.putObject({Bucket: 'chao-13', /* 填入您自己的存储桶，必须字段 */Region: 'ap-nanjing', /* 存储桶所在地域，例如ap-beijing，必须字段 */Key: params.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */StorageClass: 'STANDARD',Body: params.file, // 上传文件对象onProgress: (progressData) => {console.log(JSON.stringify(progressData))this.percent = progressData.percent * 100}}, (err, data) => {console.log('腾讯工具库上传完毕')// 延迟提升用户体验-消失进度条setTimeout(() => {this.isShowPercent = false}, 1000)console.log(err || data)if (!err) {// 手动处理 fileListthis.fileList[0].url = 'http://' + data.Locationthis.fileList[0].status = 'success'}})}}
}
</script><style lang="scss" scoped>
.hasImg {::v-deep .el-upload--picture-card {display: none;}
}
::v-deep img {// 让图片在相等大小中，保持完整显示object-fit: cover;
}
</style>

上面代码中需要注意干掉默认上传地址-使用#号即可；

若只需上传一张图片，那就设置一个动态样式，用于隐藏上传组件，通过存储图片数组的长度进行判断即可；

上传图片需要用到的组件内置函数分别有：

onPreview(点击已上传图片触发)：这里用于显示图片(放大)；

beforeUpload(上传前触发) 函数中进行图片的格式、大小等校验；

onChange(上传就会触发)：因为数据绑定是单项的，所以需要手动进行图片的替换；

onRemove(移除图片触发)：用于删除不需要的图片；

httpRequest(默认上传路径)：这里配置腾讯云上传路径，需要按需填入对应的数据；

密钥在哪里查看？

三：找不到上传文档？不知道httpRequest 里的内容在哪里找？看这里就够了

第一步：点击spi文档会有弹框，点击SDK列表进入

第二步：点击javaScript SDK快速入门

第三步：上传对象复制需要的即可

总结：以上就是如何上传的全过程，代码可以结合文档来查看-效果更好