vue上传阿里oss
近期相中上传图片利用后端传递到阿里云服务器会慢一点,让后想着前端直接上传阿里云来提高带宽。记录一下
首先下载
npm install ali-oss //下载插件ali-oss
我利用的element-ui
<el-uploadclass="avatar-uploader"action="##":show-file-list="false":on-success="handleAvatarSuccess":http-request="uploadImageOss":before-upload="beforeAvatarUpload"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>
<script>
import OSS from 'ali-oss'
import axios from 'axios'
import moment from 'moment'
uploadImageOss(file){this.getFile(file)
}
async getFile({file}){//首先调用后端接口获取oss配置let stsData = await axios.post('接口地址').then(res=>res.data.data) var parseMast = {bucket:stsData.Credentials.bucket , // 这个可以找开通OSS的管理员拿,或者接口返回获取region: stsData.Credentials.endpoint, // 同上accessKeyId: stsData.Credentials.AccessKeyId, // 从接口返回的数据获取accessKeySecret: stsData.Credentials.AccessKeySecret, // 同上stsToken: stsData.Credentials.SecurityToken,//从接口返回的数据获取secure: true}let client = new OSS(parseMast); // 调用OSS依赖let name = file.namelet date = new Datelet dateFormat = moment(date).format('YYYYMMDD')client.multipartUpload('CJ/'+dateFormat+'/'+name, file, )
.then(res=>{console.log(res.res.requestUrls[0]);//上传成功//so 这里有个小问题 如果上传的是利用微信截图的png图片 返回的链接会自动带一个?uploadId=‘’ 返回的链接不能打开只能吧 ? 之后的全部删除我的处理方式是 利用后端接口返回的bucket + endpoint 进行了图片的拼接'http://' +stsData.Credentials.bucket + '.' + stsData.Credentials.endpoint + '.aliyuncs.com/' + 'CJ/'+dateFormat+'/'+name})
.catch(err=>{console.log(err);//上传失败之后})
}
</script>
有没有哪位大佬跟我说一下为什么会返回一个uploadId 怎么解决 谢谢!!
vue上传阿里oss相关推荐
- Java实现文件上传阿里OSS
前言简介 这边博文实际上想要展现的是一个文件上传阿里OSS的工具类,但是过程是完全实现一个公司根据业务需求去开发实现上传的一个业务需求,综合比较其他博文,这篇博文可能比较罗嗦点.所以根据自身需求来 ...
- Vue上传阿里云OSS(STS方式)
一.准备工作 1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和AccessKeySecret. 2. 创建Bucket,并登录OSS控制台 3. 配置Bucket (很重要) 将al ...
- vue 上传文件至阿里云oss
先让后端在阿里云里面处理跨域问题 参考这篇文章 vue直传图片到阿里云OSS(单张直接上传)__小郑有点困了的博客-CSDN博客_vue 阿里云背景:近期项目使用到多图片上传功能,常规的调用后端接 ...
- vue+el-upload组件封装(图片,文件上传至oss阿里云)
1.安装ali-oss npm install ali-oss --save 2.oss方法封装 新建utils/ali-oss-upload.js文件(代码如下) const OSS = requi ...
- vue 实现压缩图片上传到oss
我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样.你可能选择使用 ...
- 前端不暴露ak/sk直接上传阿里云oss的方案
需求起因 以前写过一篇文章:前端不暴露ak/sk直接上传aws S3的方案 因为项目里还用到的阿里云的oss上传,就研究了阿里云是不是也有避免ak/sk泄露到前端的方案, 这里也复述一下这么做的原因: ...
- 微信 开发 图片 上传 阿里云 oss 服务器
在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...
- 文件分片上传阿里云OSS
本文参考其他博客并结合自身编写 博客原作者:程序猿谢哥哥 博客原地址:https://blog.csdn.net/weixin_42825651/article/details/108792264 注 ...
- spring boot上传阿里云对象存储OSS快速上手(一、控制台简介)
代码实现请看下一篇: spring boot上传阿里云对象存储OSS快速上手(二.代码实现,复制粘贴可用) 简介: 1.阿里云对象存储OSS其实就是一个文件存储的服务 2.在我们的开发过程中会遇到类似 ...
最新文章
- python必刷面试_Python面试必刷题系列(5)
- 畅销榜第7,《魔神英雄传:神龙斗士》制作人复盘研发历程
- 网络爬虫--18.python中的GIL(全局解释器锁)、多线程、多进程、并发、并行
- wordpress acf字段 不同样式_提升wordpress执行效率二次开发实录
- 二级MS Office公共基础知识错题本(1)
- C++设计模式-开放-封闭原则基本概念与实例
- Codeforces ----- Kefa and Dishes [状压dp]
- centos 7.3 设置静态IP
- CS224N笔记——Word Window分类与神经网络
- 7-8 mmh学长的Excel表格 (20分)
- php获取银行logo,依据银行卡号获取银行信息php代码
- MSVCRTD.lib重复定义问题
- IPv4 Type of Service服务类型(TOS)字段
- MySQL面试题学习笔记
- iPhone视频播放器(1)
- [RK3568 Android11] 开发之APP应用切换USB OTG模式
- corosync+pacemaker+web集群
- NTT笔记和多项式全家桶
- Android--获取所有联系人以及所有的字段(联系人头像,邮箱,地址,公司等)
- 实战-Fluxion与wifi热点伪造、钓鱼、wifi破解