Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >腾讯云 COS 文件上传后下载

腾讯云 COS 文件上传后下载

原创
作者头像
dandelion1990
发布于 2024-01-05 12:01:41
发布于 2024-01-05 12:01:41
1.6K0
举报

上一篇讲了如何通过 Web 直传文件到 COS,在其基础上介绍上传后如何下载文件

后端 STS 服务

首先后端的 STS 服务需要改造一下,增加查询下载 URL 的权限

代码语言:go
AI代码解释
复制
{
    Action: []string{
        // 下载操作
        "name/cos:GetObject",
    },
    Effect: "allow",
    Resource: []string{
        "qcs::cos:ap-guangzhou:uid/" + appId + ":" + bucket + "/*",
    },
    Condition: map[string]map[string]interface{}{},
},

其他权限列表请可以看:COS API 授权策略使用指引

前端 Demo 改造

参考Javascript SDK,上传后通过 SDK 得到访问 URL,可以在页面展示或者下载

代码语言:vue
AI代码解释
复制
<template>
  <div>
    <div>
      <input type="file" @change="uploadImage" ref="imageInput" />
      <button @click="submitImage">Upload Image</button>
      <button v-if="imageUrl" @click="downloadImage">Download Image</button>
    </div>
    <div>
      <img v-if="imageUrl" :src="imageUrl" alt="Description of image ">
    </div>
  </div>
</template>
  
<script>
import COS from 'cos-js-sdk-v5';
const bucket = ${bucket};
const region = ${region};

export default {
  data() {
    return {
      imageFile: null,
      cos: null,
      imageUrl: null,
      imageKey: null,
      tmpSecretId: "",
      tmpSecretKey: "",
      sessionToken: "",
    };
  },
  methods: {
    uploadImage(event) {
      this.imageFile = event.target.files && event.target.files[0];
    },
    submitImage() {
      if (!this.imageFile) {
        alert("Please choose an image to upload.");
        return;
      }
      this.initCOS();
      this.uploadToCOS();
    },
    initCOS() {
      this.cos = new COS({
        getAuthorization: function (options, callback) {
          const url = 'http://${host}:8080/credentials'
          const xhr = new XMLHttpRequest()
          let data = null
          let credentials = null
          xhr.open('GET', url, true)
          xhr.onload = function (e) {
            try {
              data = JSON.parse(e.target.responseText);
              credentials = data.credentials;
            } catch (e) {
              console.log(e)
            }
            if (!data || !credentials) {
              return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2))
            }
            callback({
              TmpSecretId: credentials.tmpSecretId,
              TmpSecretKey: credentials.tmpSecretKey,
              SecurityToken: credentials.sessionToken,
              StartTime: data.startTime, // 时间戳,单位秒,如:1580000000
              ExpiredTime: data.expiredTime, // 时间戳,单位秒,如:1580000000
            })
          }
          xhr.send();
        }
      })
    },
    uploadToCOS() {
      const key = `test/${Date.now()}_${this.imageFile.name}`;
      this.cos.uploadFile(
        {
          Bucket: bucket,
          Region: region,
          Key: key,
          StorageClass: "STANDARD",
          Body: this.imageFile,
        },
        (err) => {
          if (err) {
            console.error("Error uploading image:", err);
            alert("Error uploading image.");
          } else {
            this.imageKey = key;
            this.getImageUrl()
            alert("Image uploaded successfully.");
            this.$refs.imageInput.value = null;
            this.imageFile = null;
          }
        }
      );
    },

    getImageUrl() {
      let that = this
      this.cos.getObjectUrl({
        Bucket: bucket,
        Region: region,
        Key: this.imageKey,
      }, function (err, data) {
        if (err) return console.log(err);
        /* 通过指定 response-content-disposition=attachment 实现强制下载 */
        const downloadUrl = data.Url + (data.Url.indexOf('?') > -1 ? '&' : '?') + 'response-content-disposition=attachment';
        /* 可拼接 filename 来实现下载时重命名 */
        /* downloadUrl += ';filename=myname'; */
        // (推荐使用 window.open()方式)这里是新窗口打开 url,如果需要在当前窗口打开,可以使用隐藏的 iframe 下载,或使用 a 标签 download 属性协助下载
        that.imageUrl = downloadUrl
        console.log("Image uploaded successfully. URL:", that.imageUrl);
      })
    },
    downloadImage() {
      const link = document.createElement("a");
      link.href = this.imageUrl;
      link.download = this.imageUrl.split("/").pop();
      link.click();
    },
  },
};
</script>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
腾讯云 COS 文件 Web 直传
dandelion1990
2024/01/03
7570
利用STS临时密钥服务快速搭建直传页面的实践
作者简介 吴硕卫:腾讯云技术支持工程师,现负责腾讯云存储产品的技术支持专项工作。 为了实现权限分离,提供更细颗粒度的权限控制,有效的控制帐号生效周期,本文通过腾讯云 CAM 产品的 STS(临时访问凭证)来实现部署,调试,验证等一系列的操作体验。 主要介绍基于腾讯云对象存储 COS,如何使用 COS 签名工具和 HTTP 请求工具 Postman 来验证临时密钥的有效性,以及如何快速实现一个 Web 端页面的文件直传功能。服务器上只需要生成和管理访问密钥,无需关心细节,文件数据都存放在腾讯云 COS
云存储
2020/08/07
3.7K0
JavaScript 结合 Go 实现 临时密钥(STS)
最近有个项目,需要通过网页上传文件到对象存储中,在查看COS快速入门时,文档建议使用获取临时密钥:
2023/08/15
4620
对象储存cos-腾讯云对象储存cos
COS是腾讯云提供的对象存储服务,功能非常强大,可以作为文件服务器,CDN加速,静态网页服务,还提供了图片的常用操作。
张天华
2019/08/01
24.8K0
对象储存cos-腾讯云对象储存cos
微信小程序上传图片到腾讯COS存储桶实战
作者:火种 最近为了实现在小程序上传图片到腾讯COS存储桶,把官方提供的demo,看了一遍又一遍,试了又试,错了又错,踏过一个又一个坑,终于从不懂,到懵懂,到懂。>.<,好累,在此过程就不赘述,直接开始,希望和我一样的小白也可能轻松用上腾讯COS存储桶。
加菲猫的VFP
2022/05/26
3.9K0
微信小程序上传图片到腾讯COS存储桶实战
腾讯云COS对象存储的简单使用
叮当哥之前买了一年的腾讯云服务器,昨日偶然发现腾讯云送了叮当哥半年的cos对象存储服务器,于是就撸起袖子传了几张珍藏的大图上去,现将其上传的简单使用步骤总结一波(其它操作参加官方SDK文档API)。
宋先生
2019/07/18
19.2K1
HTTP请求的ECONNRESET
某部分客户业务使用cos的node.js的sdk来进行上传下载等操作,近期客户端偶尔触发上传文件报错{ error: { code: 'ECONNRESET' } } 的异常。
sheazhang
2020/05/01
21.3K0
HTTP请求的ECONNRESET
利用STS临时密钥服务快速搭建直传页面的实践
为了实现权限分离,提供更细隔离度的权限控制,有效的控制帐号生效周期,本文通过腾讯云CAM产品的STS(临时访问凭证)来实现部署,调试,验证等一系列的操作体验。
吴硕卫
2020/07/28
6.3K2
利用STS临时密钥服务快速搭建直传页面的实践
腾讯云 COS 访问方法
签名即输入 SecretId、SecretKey、有效时间时间戳,原始请求,得到以下签名内容的过程:
dandelion1990
2024/01/02
1.6K0
腾讯云 COS 访问方法
智能结构化OCR实现个人小账本demo(基于NodeJS)
智能结构化(Smart Structure Optical Character Recognition )融合了业界领先的深度学习技术、图像检测技术以及 OCR 大模型能力,能够实现不限版式的结构化信息抽取。本文以NodeJS为例,实现一个基于智能结构化OCR的个人小账本demo。
治电小白菜
2024/12/26
2480
智能结构化OCR实现个人小账本demo(基于NodeJS)
COS SDK有Flutter和React Native版本啦
对象存储COS简介 对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据。腾讯云 COS 使所有用户都能使用具备高扩展性、低成本、可靠和安全的数据存储服务。 COS 通过控制台、API、SDK 和工具等多样化方式简单、快速地接入,实现了海量数据存储和管理。通过 COS 可以进行任意格式文件的上传、下载和管理。腾讯云提供了直观的 Web 管理界面,同时遍布全国范围的 CDN 节点可以对文件下载进行加速。 导语 Flu
云存储
2023/05/18
8960
COS SDK有Flutter和React Native版本啦
存储腾讯云(例:上传图片)
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
玖柒的小窝
2021/10/26
16.9K0
存储腾讯云(例:上传图片)
腾讯云智能体开发平台 API 的开发实战:基于RAG的论文阅读助手
科研工作者,尤其是那些奋战在知识前沿的探索者们,正面临着信息洪流的巨大挑战。每天都有如潮水般涌来的学术论文,这既是机遇,也是重负。
Lion 莱恩呀
2025/03/02
5581
腾讯云智能体开发平台 API 的开发实战:基于RAG的论文阅读助手
对象存储 Node.js SDK cos-nodejs-sdk-v5 Typescript 声明文件
用到腾讯云对象存储,使用Node.js SDK cos-nodejs-sdk-v5,没有 typescript 的声明文件,自己写了一个。
苦少
2020/05/11
2K0
使用腾讯云 SCF 云函数压缩 COS 对象存储文件
腾讯云serverless团队
2017/10/17
16.9K2
在Minio以STS方式获得临时凭据上传文件
一个常见的场景是:需要让客户端来上传图片,面临的安全性问题。给与客户端永久凭据无疑是很大风险的,我们还可以选择“给予一个临时凭据,这个凭据关联到一个 授权的用户,我们可以随时停用和修改这个用户具有的权限”
张云飞Vir
2023/04/19
7.5K0
在Minio以STS方式获得临时凭据上传文件
智能识别,一键兑换:腾讯云OCR智能结构化高级版识别在零售行业的应用实践
https://cloud.tencent.com/developer/article/2323707
快乐的小白
2025/01/12
2310
智能识别,一键兑换:腾讯云OCR智能结构化高级版识别在零售行业的应用实践
简化车辆登记流程:利用腾讯云OCR实现自动化信息识别
项目中有一块,需要用到上传车牌车牌号到系统里,用了下腾讯云的ocr车牌号识别做了个小功能。通过腾讯云的orc识别,将车牌号录入到后台。
快乐的小白
2023/09/05
5030
简化车辆登记流程:利用腾讯云OCR实现自动化信息识别
Vue Cos 上传
cos_utils.js工具函数 /* npm i cos-js-sdk-v5 --save //文件对象上传: utils.cos_utils.putObject( { bucket:'spoongsb-1253997188', region:'ap-chengdu' },'lecturer-files',fileObj,(progerss)=>{ console.log(progerss) },(data
前端小鑫同学
2022/12/24
1.1K0
一文带你看懂 前后端之间图片的上传与回显
上传文件需要发送请求。在这些请求中,浏览器将数据拆分为小的“块”,然后通过连接逐个发送这些块。这是必要的,因为文件可能过大而无法一次性发送作为一个庞大的有效负载。
用户10143704
2024/03/22
3K0
推荐阅读
相关推荐
腾讯云 COS 文件 Web 直传
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档