腾讯云笔记

最新推荐文章于 2024-08-02 12:18:10 发布

December_shi

最新推荐文章于 2024-08-02 12:18:10 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/december_shi/article/details/116803012

版权

本文介绍了如何注册腾讯云并获取免费存储空间，然后详细阐述了如何封装一个前端上传图片组件，包括初始化COS对象、设置上传权限、创建存储桶、限制上传条件、调用腾讯云SDK进行上传、处理上传成功后的数据和显示进度条等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注册腾讯云，获取云存储

1、为什么要注册腾讯云

开发的过程中，我们不希望把所有的图片都上传到自己的服务器上，这里我们可以采用一个腾讯云的图片方案

简单来说，我们可以找一上传图片的服务器，帮我们代管图片，我们在自己的数据库里只保存一个地址就行，这其实也是很多项目的处理方案，会有一个公共的文件服务器

2、怎么去注册，并获取存储空间

第一步，实名认证

选择个人账户

在这里插入图片描述

填写个人身份信息

在这里插入图片描述

手机端微信扫码进行授权

在这里插入图片描述

点击领取免费产品

腾讯云免费产品体验链接地址

在这里插入图片描述

选择对象存储COS

在这里插入图片描述

点击0元试用，开通服务

在这里插入图片描述

到这里，账号的部分就操作完毕，接下来，我们需要来创建一个存储图片的存储桶

快速入门文档：https://cloud.tencent.com/document/product/436/11459#.E4.B8.8B.E8.BD.BD.E4.B8.8E.E5.AE.89.E8.A3.85

登录对象存储控制台，创建存储桶。设置存储桶的权限为公有读，私有写

在这里插入图片描述

创建存储桶

在这里插入图片描述

设置cors规则

在这里插入图片描述

AllowHeader 需配成*，如下图所示。

在这里插入图片描述

因为我们本身没有域名，这里设置成*，仅限于测试，正是环境的话，这里需要配置真实的域名地址

到这里，腾讯云存储桶就设置好了。

使用腾讯云完成自己的项目需求

1、封装上传图片组件

需求分析

初始化cos对象参数

名称	描述
SecretId	开发者拥有的项目身份识别ID，用以身份认证，可在API 密钥管理页面获取
SecretKey	开发者拥有的项目身份密钥，可在 API 密钥管理页面获取

注意，上述的参数我们在本次开发过程中，直接将参数放置在前端代码中存储，但是腾讯云本身是不建议这么做的，因为**敏感信息**放在前端很容易被捕获，由于我们本次是测试研发，所以这个过程可以忽略

正确的做法应该是，通过网站调用接口换取敏感信息

腾讯云文档链接

实例化上传sdk

var cos = new COS({
   
    SecretId: 'COS_SECRETID', // 身份识别 ID
    SecretKey: 'COS_SECRETKEY', // 身份密钥
});

到目前为止，我们上传图片准备的内容就已经OK，接下来，我们在**src/componets** 新建一个**ImageUpload** 组件

该组件需要满足什么要求呢？

可以显示传入的图片地址
可以删除传入的图片地址
可以上传图片到云服务器
上传到腾讯云之后，可以返回图片地址，显示
上传成功之后，可以回调成功函数

这个上传组件简单吗？

no ! ! !

看似需求很明确，但是它真正的实现很复杂，我们通过一个图来看一下

在这里插入图片描述

从上图中，我们可以看到，实际上是有两种场景的，本地场景和已经上传的场景

下个章节，针对这个场景我们进行开发

2、封装上传组件-代码实现

**目标**实现上传组件的代码部分

JavaScript SDK 需浏览器支持基本的 HTML5 特性（支持 IE10 以上浏览器），以便支持 ajax 上传文件和计算文件 MD5 值。

3、新建文件上传组件

安装JavaScript SDK

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

新建上传图片组件 src/components/ImageUpload/index.vue

上传组件，我们可以沿用element的el-upload组件,并且采用照片墙的模式 list-type="picture-card"

放置el-upload组件

<template>
  <el-upload list-type="picture-card">
     <i class="el-icon-plus" />
  </el-upload>
</template>

全局注册组件

import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
import ImageUpload from './ImageUpload'
export default {
   
  install(Vue) {
   
    Vue.component('PageTools', PageTools) // 注册工具栏组件
    Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
    Vue.component('ImageUpload', ImageUpload) // 注册导入上传组件
  }
}