1. Toy模板网首页
  2. >Toy博客

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】

1年前作者：白开水为啥没味分类：Toy博客阅读(31)违法举报

这篇具有很好参考价值的文章主要介绍了上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、首先登录腾讯云官网控制台 进入对象存储页面

2、找到跨越访问CIRS设置 配置规则

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

 点击添加规则

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

 填写信息

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

 3、书写代码

这里用VUE3书写

第一种用按钮出发事件形式

<template>
  <div>
    <input type="file" @change="handleFileChange" />
  </div>
</template>

<script>
import COS from "cos-nodejs-sdk-v5"; // 导入cos-nodejs-sdk-v5包

export default {
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0];
      const cos = new COS({
        SecretId: "YOUR_SECRET_ID",
        SecretKey: "YOUR_SECRET_KEY",
      });

      // 替换成你的 Bucket 名称和 Region
      const bucket = "YOUR_BUCKET_NAME";
      const region = "YOUR_BUCKET_REGION";

      // 生成对象存储桶中的图片路径
      const key = `images/${file.name}`;

      // 将图片上传到腾讯云对象存储桶
      cos.putObject(
        {
          Bucket: bucket,
          Region: region,
          Key: key,
          Body: file,
        },
        (err, data) => {
          if (err) {
            console.error("上传失败：", err);
              this.$message.error("上传失败")

          } else {
            console.log("上传成功：", data.Location);
              this.$message.success("上传成功")

          }
        }
      );
    },
  },
};
</script>

4、测试

点击选择文件

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

选择图片 

等待结果

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

 上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

第二种用el-upload

<el-upload v-if="imageUrl===null"
                     class=""
                     list-type="picture-card"
                     :show-file-list="false"
                     :before-upload="beforeUpload"
                     action=""
                     :on-change="handleUploadChange"

          >
            <el-icon class="el-icon-plus"><plus></plus></el-icon>
</el-upload>
beforeUpload(file) {
      // 预览图片
      this.file = file;
      this.imageUrl = URL.createObjectURL(file);
      console.log("头像链接为"+this.imageUrl)
      return new Promise((resolve, reject) => {
        const cos = new COS({
          SecretId: "", // 身份识别 ID
          SecretKey: "", // 身份密钥
        });

        // 替换成你的 Bucket 名称和 Region
        const bucket = "";
        const region = "";

        // 生成对象存储桶中的图片路径
        const key = `user_information/avatar/${this.user.username}/${file.name}`;


        //待删除的之前的图片的key
        let key1='';

        console.log("key为"+key)
        // 将文件转换为 Blob 对象
        const blob = new Blob([file.raw], { type: file.type });
        console.log("blob"+blob)

        // 将图片上传到腾讯云对象存储桶
        cos.putObject(
            {
              Bucket: bucket,
              Region: region,
              Key: key,
              Body: file,
            },
            (err, data) => {
              setTimeout(()=>{
                if (err) {
                  console.error("上传失败：", err);
                  this.$message.error("上传失败");
                  reject(err);
                } else {
                  // console.log("打撒笔"+this.user.avatarUrl)
                  console.log("上传成功：", data.Location);
                  if(this.user.avatarUrl!==null){
                    key1 = this.user.avatarUrl.replace("https://"+bucket+".cos."+region+".myqcloud.com/", "");
                    // 删除文件
                    console.log("key1：", key1);
                    cos.deleteObject({
                      Bucket: bucket,
                      Region: region,
                      Key: key1,
                    }, (err, data) => {
                      if (err) {
                        console.log('Error deleting file:', err);
                      } else {
                        console.log(data)
                        console.log('云端路径为：'+key1+"的图片已经被删除");
                      }
                    });

                  }


                  this.form.avatarUrl="https://"+ data.Location
                  this.user.avatarUrl="https://"+ data.Location

                  localStorage.setItem("user", JSON.stringify(this.user));
                  // 刷新当前页面
                  location.reload();
                  this.save1();
                  console.log(data)
                  // this.$message.success("上传图片成功");


                  resolve(false); // 阻止 Element-UI 的默认上传行为
                }

              },1000)

            }
        );

        // if(key1!==''){

        // }
      });
    },
    handleUploadChange(file) {
      if (file.status === "success") {
        this.$message.success("上传成功");
      } else if (file.status === "error") {
        this.$message.error("上传失败");
      }
    },

也可以把el-upload嵌套button包装成这种形式

<el-upload
            class=""
            :show-file-list="false"
            :before-upload="beforeUpload"
            action=""
            :on-change="handleUploadChange"
            style="margin-right: 15px"
        >
        <el-button v-if="this.user.avatarUrl"  style="background-color: #3f72af;color: 
               white;border-radius: 15px;width: 100px;height: 40px" type="" >更改头像
        </el-button> 
</el-upload>

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】,腾讯云,云计算

按照这个逻辑上传头像的整体代码 （写的不好 待优化 欢迎大神优化）文章来源地址https://www.toymoban.com/news/detail-615385.html

<div v-if="this.user.avatarUrl" class="avatar">
          <el-image id="elimg"  class="preview-image"
                    :src="this.user.avatarUrl"
                     style="width: 170px; height: 170px; position: relative; justify-content: center" >
          </el-image >
        </div>
        <div v-else class="avatar" id="avatar">
        
          <el-image id="elimg" v-if="imageUrl" class="preview-image"
                    :src="imageUrl"
                    :preview-src-list="[imageUrl]" style="width: 170px; height: 170px; position: relative; justify-content: center" >
          </el-image >
          <el-icon size="large"  v-if="imageUrl" class="el-icon-close" @click="cancelUpload"><close></close></el-icon>
          <el-upload v-if="imageUrl===null"
                     class=""
                     list-type="picture-card"
                     :show-file-list="false"
                     :before-upload="beforeUpload"
                     action=""
                     :on-change="handleUploadChange"

          >
            <el-icon class="el-icon-plus"><plus></plus></el-icon>
          </el-upload>

        </div>
import {Close, Plus} from "@element-plus/icons";
import COS from "cos-js-sdk-v5";


export default {
  name: "UserInfo",
  components: {Plus,Close},
   data(){
    return {
      form:{},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      imageUrl: null,
      file: null,
    }
  },

}
 beforeUpload(file) {
      // 预览图片
      this.file = file;
      this.imageUrl = URL.createObjectURL(file);
      console.log("头像链接为"+this.imageUrl)
      return new Promise((resolve, reject) => {
        const cos = new COS({
          SecretId: "", // 身份识别 ID
          SecretKey: "", // 身份密钥
        });

        // 替换成你的 Bucket 名称和 Region
        const bucket = "";
        const region = "";

        // 生成对象存储桶中的图片路径
        const key = `user_information/avatar/${this.user.username}/${file.name}`;

        let key1='';

        console.log("key为"+key)
        // 将文件转换为 Blob 对象
        const blob = new Blob([file.raw], { type: file.type });
        console.log("blob"+blob)

        // 将图片上传到腾讯云对象存储桶
        cos.putObject(
            {
              Bucket: bucket,
              Region: region,
              Key: key,
              Body: file,
            },
            (err, data) => {
              setTimeout(()=>{
                if (err) {
                  console.error("上传失败：", err);
                  this.$message.error("上传失败");
                  reject(err);
                } else {
                  // console.log("打撒笔"+this.user.avatarUrl)
                  console.log("上传成功：", data.Location);
                  if(this.user.avatarUrl!==null){
                    key1 = this.user.avatarUrl.replace("https://"+bucket+".cos."+region+".myqcloud.com/", "");
                    // 删除文件
                    console.log("key1：", key1);
                    cos.deleteObject({
                      Bucket: bucket,
                      Region: region,
                      Key: key1,
                    }, (err, data) => {
                      if (err) {
                        console.log('Error deleting file:', err);
                      } else {
                        console.log(data)
                        console.log('云端路径为：'+key1+"的图片已经被删除");
                      }
                    });

                  }


                  this.form.avatarUrl="https://"+ data.Location
                  this.user.avatarUrl="https://"+ data.Location

                  localStorage.setItem("user", JSON.stringify(this.user));
                  // 刷新当前页面
                  location.reload();
                  this.save1();
                  console.log(data)
                  // this.$message.success("上传图片成功");


                  resolve(false); // 阻止 Element-UI 的默认上传行为
                }

              },1000)

            }
        );

        // if(key1!==''){

        // }
      });
    },

cancelUpload() {
      // 清除预览图片和文件
      this.imageUrl = null;
      this.file = null;
    },
 save1(){
      this.request.post("/saveuser",this.form).then(res => {
        if(res){
          this.$message.success("保存图片成功")

        }else{
          this.$message.error("保存图片成功")

        }

      })
    },

到了这里，关于上传图片到腾讯云对象存储桶cos 【腾讯云对象存储桶】【cos】【el-upload】【vue3】【上传头像】【删除】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包