首页 > 其他分享 >vue 使用腾讯云 cos存储 上传

vue 使用腾讯云 cos存储 上传

时间:2023-04-28 15:11:27浏览次数:47  
标签:cos vue console log err file 上传

参考文档:https://blog.csdn.net/qq_34170840/article/details/124520388

1、页面部分

点击查看代码
   <input ref="fileRef" title="" type='file' name="file" multiple class="file-input"
            @change="uploadStart($event, value)" accept="image/png, image/jpeg, .svs" />

2、js部分

点击查看代码
import COS from 'cos-js-sdk-v5'
// 后端提供
var cos = new COS({
  SecretId: 'AKIDFestgFbingLchZEguulU1MWSBgxzmLfk',
  SecretKey: 'tY2OYVFm7FBuQkqkSxFUYR7bt43qQnxz',
});

const uploadStart = (e) => {
  let file = e.target.files && e.target.files[0];
  if (!file) {
    document.getElementById('msg').innerText = '未选择上传文件';
    return;
  }
  console.log(file, cos);
  handleFileInUploading(file);
  /* 直接调用 cos sdk 的方法 */
}

const handleFileInUploading = (file) => {
  cos.uploadFile({
  	// 后端提供
    Bucket: 'prd-bdgj-1253531169', /* 填写自己的 bucket,必须字段 */
    Region: 'ap-shanghai-fsi',     /* 存储桶所在地域,必须字段 */
    Key: file.name,              /* 存储在桶里的对象键(例如:1.jpg,a/b/test.txt,图片.jpg)支持中文,必须字段 */
    Body: file, // 上传文件对象
    // SliceSize: 1024 * 1024 * 5,     /* 触发分块上传的阈值,超过5MB使用分块上传,小于5MB使用简单上传。可自行设置,非必须 */
    onProgress: function (progressData) {
      console.log(JSON.stringify(progressData));
    }
  }, function (err, data) {
    if (err) {
      console.log('上传失败', err);
    } else {
      console.log('上传成功');
    }
  });

标签:cos,vue,console,log,err,file,上传
From: https://www.cnblogs.com/Mar-/p/17362257.html

相关文章

  • 老杜2023最新Vue实战精讲(五)Vuex
    动力节点老杜全新版Vue教程笔记分享给大家学习の地止:https://www.bilibili.com/video/BV17h41137i4视频教程从Vue2开始讲解,一步一个案例,知识点由浅入深,然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。视频中会把每一个Vue的知识点讲解的非常通透,不但举例......
  • vuex持久化
    1、使用场景vuex刷新之后数据会消失2、使用方法(1)结构1点击查看代码import{createStore}from"vuex"importstatefrom'./state'importmutationsfrom'./mutations'importactionsfrom'./actions'import*asgettersfrom'./getter......
  • 老杜Vue实战教程完整版笔记(5)Vuex
    接上篇文章,分享动力节点老杜全新版Vue教程笔记学习の地止:https://www.bilibili.com/video/BV17h41137i45Vuex5.1vuex概述vuex是实现数据集中式状态管理的插件。数据由vuex统一管理。其它组件都去使用vuex中的数据。只要有其中一个组件去修改了这个共享的数据,其它组件会同......
  • 超大文件上传和断点续传的源代码
    ​ 前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有......
  • Vue3+typescript如何给元素添加一个Ctrl+s的事件,用于保存文件?
    如下代码,建议用这个,e.keyCode已经过时,后面都是用e.key:string.onMounted(()=>{window.addEventListener('keydown',(e)=>{if(e.ctrlKey&&e.key==='s'){//检查是否按下了Ctrl+Se.preventDefault();//阻止默认行为(保存网页)con......
  • ts文件可以操控vue文件里面的ref元素吗
    ts文件可以操控vue文件里面的ref元素吗exportconstfileInputElement=ref<null|HTMLElement>(null);我在ts文件里获得fileInputElement我能操控vue文件里ref为fileInputElement的元素吗import{messagesRef,}from"@/core/helpers/chat";exportconstmessagesRef......
  • 【前端可视化】大屏scale适配vue3 hooks
    useScalePage.jsimport{onMounted,onUnmounted}from'vue';import_from'lodash';/**大屏适配的hooks*/exportdefaultfunctionuseScalePage(option){constresizeFunc=_.throttle(function(){triggerScale();//动画缩放网页}......
  • 控制台报错:[Vue warn]: Error in render: "TypeError: Cannot read properties of nu
    可能原因在调取接口获取返回值时,由于各种原因(参数错误、返回格式不规范等),导致接收返回时数据类型与初始值不同。data(){return{list:[]//原本是个数组对象}},methods:{getList(){letparams={}apiRequest(params).then(r......
  • [20230425]CBO cost与行迁移关系.txt
    [20230425]CBOcost与行迁移关系.txt--//一般现在很少使用analyzetable分析表,如果出现大量行迁移是否考虑看看是否考虑cbocost成本.--//测试参考链接:--//https://richardfoote.wordpress.com/2023/03/21/cbo-costing-plans-with-migrated-rows-part-i-ignoreland/--//https://......
  • Vue的生命周期的详解
    Vue的生命周期   Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。  Vue的生命周期就是vue实例从创建到销毁的全过程,也就是newVue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom-......