基于element-plus +腾讯云COS实现图片上传

① 首先基于element-plus里面的:http-request="upload"自定义封装事件写一个点击事件之后基于腾讯云的

  1. 登录 对象存储控制台 ,创建存储桶。获取存储桶名称和 地域名称
  2. 登录 访问管理控制台 ,获取您的项目 SecretId 和 SecretKey。
  3. 在项目中安装 SDK 【npm i cos-js-sdk-v5 --save】
  4. 使用 const COS = require('cos-js-sdk-v5');// 或 import COS from 'cos-js-sdk-v5';进行引入
  5. 前端使用固定密钥计算签名,该格式适用于前端调试,若使用此格式,请避免泄露密钥

【这里还有一些推荐的方法具体见 https://cloud.tencent.com/document/product/436/11459

  1. 当我们获取SecretKey 和 SecretId之后在定义的upload上传方法中调用 cos.uploadFile实现图片上传

腾讯云的相关操作:【https://cloud.tencent.com/document/product/436/11459】

javascript 复制代码
// 代码:
<template>
  <div class="upload-box">
    <!-- 给action一个#号 就不会报错了 -->
    <!-- file-list是上传的文件列表 可以绑定到上传组件上,让上传组件来显示 -->
    <!-- upload组件显示的是file-list -->
    <el-upload 
    class="avatar-uploader" 
    list-type="picture-card" 
    :limit="1" action="#" 
    :before-upload="beforeUpload"
    :http-request="upload" 
    :on-preview="preview" 
    :file-list="state.fileList"
    style="width: 200px"
    :on-change="changeFile"
    :class="{ disabled: fileComputed }">
      <!-- 当fileComputed 的值为 true,则给元素添加名为 "disabled" 的 CSS 类名;如果 fileComputed的值为 false,则移除该 CSS 类名。 -->
    </el-upload>
    <el-dialog v-model="state.showDialog" title="图片预览">
      <img :src="state.imgUrl" alt="" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue"
import COS from "cos-js-sdk-v5" // 引入腾讯云cos包
import { ElMessage } from "element-plus"
// 实例化COS对象
const cos = new COS({
  // 拷贝自己的秘钥和key 只有用自己的key和自己的秘钥才能上传到自己的存储桶里面
  SecretId: "自己的身份识别ID", // 身份识别 ID
  SecretKey: "自己的身份秘钥", // 身份密钥
})

const state = reactive({
  fileList: [],
  showDialog: false,
  imgUrl: "",
  currentFileUid: null, // 记录当前正在上传的uid
})
const fileComputed = computed(() => {
  return state.fileList.length === 1
})

//   点击预览事件
const preview = (file) => {
  console.log(file.url)
  state.imgUrl = file.url
  state.showDialog = true
}


const beforeUpload = (file) => {
  const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"]
  if (!types.some((item) => item === file.type)) {
    //   如果不存在
    ElMessage.error("上传图片只能是 JPG、GIF、BMP、PNG 格式!")
    return false // 上传终止
  }
  // 检查文件大小  5M 1M = 1024KB 1KB = 1024B
  const maxSize = 10 * 1024 * 1024
  if (file.size > maxSize) {
    //   超过了限制的文件大小
    ElMessage.error("上传的图片大小不能大于5M")
    return false
  }
  //   已经确定当前上传的就是当前的这个file了
  state.currentFileUid = file.uid
  return true // 最后一定要return  true
}
// changeFile 函数的主要作用是在文件列表发生变化时,根据最新的文件列表更新 state.fileList,保持数据的同步和一致性。
// 这样可以确保组件在文件变化时能够及时更新展示的内容。如果有任何疑问或需要进一步解释,请随时告诉我!
// 不能用push 这个钩子会执行多次
const changeFile = (file, fileList) => {
  // file是当前的文件 fileList是当前的最新数组 state.fileList
  // 如果当前fileList中没有该文件的话 就往里进行追加
  state.fileList = fileList.map((item) => item)
}
// 进行上传操作
const upload = (params) => {
  if (params.file) {
    // 执行上传操作
    // 这里相当于传入了两个参数 第一个参数包含了上传所需要的参数,第二个参数是一个回调函数用于处理上传操作的结果
    // 包括错误信息和上传成功后的返回数据
    cos.putObject(
      {
        Bucket: "存储桶名称", // 存储桶    【自己创建的桶的名称】
        Region: "ap-nanjing", // 地域 【自己创建的时候选择的地域】
        Key: params.file.name, // 文件名
        Body: params.file, // 要上传的文件对象
        StorageClass: "STANDARD", // 上传的模式类型 直接默认 标准模式即可
      },
      (err, data) => {
        if (!err && data.statusCode === 200) {
          // 上传成功跟新状态中的文件列表
          state.fileList = state.fileList.map((item) => {
            // 去找谁的uid等于刚刚记录下来的id
            if (item.uid === state.currentFileUid) {
              // 将成功的地址赋值给原来的url属性
              return { url: "http://" + data.Location, upload: true }
            }
            return item
          })
        }
      }
    )
  }
}
</script>

<style>
.upload-box {
  display: block;
  width: 200px;
  margin: 0 auto;
}


.disabled .el-upload--picture-card {
  display: none;
}
</style>
参考:https://cloud.tencent.com/document/product/436/64960#.E9.AB.98.E7.BA.A7.E4.B8.8A.E4.BC.A0
复制代码
  https://juejin.cn/post/7093678563747954696

注意: 我们在使用cos进行上传的时候需要创建桶,获取秘钥等操作

创建存储桶 【https://cloud.tencent.com/document/product/436/13309 创建存储桶的具体操作】文档中心-左侧创建存储桶

获取秘钥的具体操作 【https://cloud.tencent.com/document/product/598/40488】

-->

补充:

在代码中,如果直接使用 push 方法将文件对象添加到 state.fileList 中,这会导致数组的长度发生变化,

从而触发 Vue 的响应式机制。当触发响应式更新时,changeFile 方法会再次被调用,进而导致多次执行。

相关推荐
₯㎕星空&繁华7 小时前
阿里云服务器安装MySQL服务器
服务器·ubuntu·阿里云·云计算
你的大佬99919 小时前
阿里云百炼ai模型
人工智能·阿里云·云计算
一只栖枝20 小时前
备考华为HCIA - 云计算,培训与自学到底该怎么选?
云计算·华为认证·hcia·考证·职业规划
数据与人工智能律师1 天前
AI的法治迷宫:技术层、模型层、应用层的法律痛点
大数据·网络·人工智能·云计算·区块链
荣光波比1 天前
Docker(三)—— Docker Compose 编排与 Harbor 私有仓库实战指南
运维·docker·容器·云计算
企鹅侠客2 天前
mysqldump导入备份数据到阿里云RDS会报错吗
阿里云·adb·云计算
iHero2 天前
【Jitsi Meet】阿里云Docker安装Jitsi Meet后的调整
阿里云·docker·云计算
荣光波比2 天前
Ansible(三)—— 使用Ansible自动化部署LNMP环境实战指南
运维·自动化·云计算·ansible
荣光波比2 天前
Docker(五)—— Docker Compose 一键搭建 LNMP 架构并部署 WordPress
运维·docker·容器·云计算
mjhcsp2 天前
深入解析 IDM 插件开发挑战赛:技术要点与实践指南
服务器·阿里云·云计算