利用element-ul 配合腾讯云自定义上传图片

最新推荐文章于 2025-08-11 15:00:57 发布

原创最新推荐文章于 2025-08-11 15:00:57 发布 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍了如何在项目中集成腾讯云COS（对象存储服务）的JS SDK，包括安装、导入、实例化和使用SDK进行文件上传的操作步骤。同时，展示了Vue.js中使用自定义上传实现图片上传的完整代码示例，包括限制上传文件大小和类型的检查。

1：安装插件导入腾讯云

     npm i cos-js-sdk-v5   

     yarn add  cos-js-sdk-v5
//  选择其中一种.如果混用就会导致项目无法跑起来.
//  解决方法.用其中一种再下载一次.然后使用对应的方法打开.项目

2.导入

import Cos from 'cos-js-sdk-v5'

3.实例化

  let cos = new Cos({
    SecretId: 'xxx', // 身份识别 ID
    SecretKey: 'xxx', // 身份密钥
});

1.打开自己的云.在输入框中搜索密钥.然后把对应的添加

4.使用

  4:
  cos.putObject({
    Bucket: '这里时你自定义的账号名拼接数字', /* 存储桶: */
    Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
    Key: uid+'',              /* 必须是字符串 */
    StorageClass: 'STANDARD',  // 固定值
    Body: 文件对象, // 上传文件对象
    onProgress: (progressData)=> {
        上传进度
        console.log(JSON.stringify(progressData));
    }
}, (err, data)=> {
  // 上传成功或者失败的回调
    console.log(err || data);
}); -->

在云中搜索自己的存储桶..在对象存储的存储列表中.

完整代码

<template>
  <div>
    <!--
      el-element图片上传
      action:上传地址 必写
      name:上传的字段
      befor-updata:上传前
      on-success;上传成功时
      http-request:使用自定义上传  他会让action on-success无效.
     -->
    <!--  腾讯云上传使用
  1：安装插件
     cos-js-sdk-v5   yarn add  cos-js-sdk-v5
  2:导入
    import Cos from 'cos-js-sdk-v5'
  3:实例化
  let cos = new Cos({
    SecretId: 'xxx', // 身份识别 ID
    SecretKey: 'COS_SECRETKEY', // 身份密钥
});
  4:使用
  cos.putObject({
    Bucket: 'xxx-xxx', /* 存储桶: */
    Region: 'ap-guangzhou',     /* 存储桶所在地域，必须字段 */
    Key: uid+'',              /* 必须是字符串 */
    StorageClass: 'STANDARD',  // 固定值
    Body: 文件对象, // 上传文件对象
    onProgress: (progressData)=> {
        上传进度
        console.log(JSON.stringify(progressData));
    }
}, (err, data)=> {
  // 上传成功或者失败的回调
    console.log(err || data);
}); -->
    <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :http-request="httprequest"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon" />
    </el-upload>
  </div>
</template>

<script>
import Cos from 'cos-js-sdk-v5'
const cos = new Cos({
  SecretId: 'xxx', // 身份识别 ID
  SecretKey: 'xxx' // 身份密钥
})
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      console.log(file)
      // 定义上传图片的大小
      const size = file.size / 1024 / 1024 < 1
      // 定义上传图片的类型
      const type = file.type === 'image/png'
      if (!size) {
        // 条件不满足时提示信息
        this.$message.error('请上传1M的图片')
      }
      if (!type) {
        // 条件不满足时提示信息
        this.$message.error('请上传png格式的图片')
      }
      return size && type
    },
    // 自定义上传
    httprequest(res) {
      // 打印获得当前res的值.res.file就等于当前上传的对象
      console.log(res, 2121)
      cos.putObject({
        Bucket: 'qqqzzz123-1308460128', /* 存储桶: */
        Region: 'ap-chongqing', /* 存储桶所在地域，必须字段 */
        Key: res.file.uid + '', /* 必须是字符串 */
        StorageClass: 'STANDARD', // 固定值
        Body: res.file, // 上传文件对象
        onProgress: (progressData) => {
          // 上传进度
          console.log(JSON.stringify(progressData))
        }
      }, (err, data) => {
        // 上传成功或者失败的回调
        console.log(err || data)
        // 默认显示的图片等于上传成功后的图片
        this.imageUrl = 'http://' + data.Location
      })
    }
  }
}
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>