Vue.js上传图片到阿里云OSS存储的方法示例


Posted in Javascript onDecember 13, 2018

如何在VueJS使用阿里云存储上传图片?

什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service)

在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本、图片、音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的

(1)首先,打开官网-----https://www.aliyun.com/

打开官网,我们鼠标挪到产品这一列,展开后,我们点击对象存储OSS

Vue.js上传图片到阿里云OSS存储的方法示例

(2)点击去之后,鼠标滑到最后,点击产品文档

Vue.js上传图片到阿里云OSS存储的方法示例

(3)进去之后,我们看到有一大栏内容,不要怕,先做第一波操作,自己慢慢看完官网的一些API或者方法,不要求全部会,但最起码有个了解

Vue.js上传图片到阿里云OSS存储的方法示例

(4)看得是不是头皮发麻,哈哈,本人也是,我们可以直接看接入OSS部分

Vue.js上传图片到阿里云OSS存储的方法示例

(5)进去发现之后好像也没看到官方提示的demo或者Code,为了不麻烦各位的时间,我们直接点击这个

Vue.js上传图片到阿里云OSS存储的方法示例

我们来看看官方提供的实例代码,有些人可能一眼就看出来是什么意思了,但是我想解释一下通过Client调用PUT方法,里面的两个参数代表是什么意思呢?

第一个参数:object-name* 就是你要上传到OSS管理控制台的路径

我们来结合input标签看看:

Vue.js上传图片到阿里云OSS存储的方法示例

因为我这边对图片的类型没有限制这个要求,所以我选择了所有类型的图片格式accept="image/*",接下来我们继续看:
比如我们在对这个input标签添加默认改变事件之后,也是@change="handlefile($event)", 然后我们在methods里面定义一个handlefile (event) {}这个方法

首先,我们可以打印一下,看看event打印的东西

Vue.js上传图片到阿里云OSS存储的方法示例

我们可以直接看这个target,展开后,我们去找我们需要的东西,或者我们可以直接这样打印,event.target.files[0],我们来看看结果

Vue.js上传图片到阿里云OSS存储的方法示例

我们需要的就是type这个属性:type="image/jpeg", 因为到时你上传到公司的OSS管理控制台,可能是要按照他们提供的地址去拼接,所以我们拿到这个type属性进行截串,拿到格式的后缀.jpeg

Vue.js上传图片到阿里云OSS存储的方法示例

当然截串的方式有很多种,哪种方便哪种来吧

拿到后缀之后,接下来我们要做的就是:去拼接上传路径

Vue.js上传图片到阿里云OSS存储的方法示例

其中date是时间戳,用来加以区分唯一性,并且你也可以在拼的时候加上自己的标识

第二个参数:local-file 就是input标签的file属性 (event.target.files[0]*)
当了解完这两个参数后,至于前面的

region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'

公司分工比较明确,有人已经在申请好了,拿过来以字符串的形式写死就可以了。

看完之后,相信你也可以用官方提供的能做出来

那么在VueJS中怎么去做呢,第一种做法就是你可以直接npm install ali-oss --save, 然后创建一个JS文件,然后导入进去

Vue.js上传图片到阿里云OSS存储的方法示例

接着,就是你需要用到的地方去调用client的PUT 方法,然后去执行,第二种方法就是我并没有用官方提供的try catch去做,我是这样做的

我首先在index.html引入

Vue.js上传图片到阿里云OSS存储的方法示例

接着,我在需要用的地方通过client 去调用PUT方法:

Vue.js上传图片到阿里云OSS存储的方法示例

那么在成功的回调中,就可以拿到图片的URL,那么就可以了~简单的图片的上传就OK了,但是另外延伸一点东西,就是,因为做的是IM聊天的东西,当我上传同一文件多次的时候,会出现无效的情况,后来我去了解了一下,就是说:我们先回到这张图

Vue.js上传图片到阿里云OSS存储的方法示例

解释: @click="headImage"用于触发Input被点击,用于选择文件。

**@change="handfile($event)"**方法在选择的文件改变后触发,其中$event包含已选择文件的所有文件信息。

**文件路径**:**event.target.value**;

造成无效的结果说明,你每次提交的路径都是一致的,加上@change="handfile($event)"这个事件也就只有文件路径event.target.value发生改变的时候才会触发

那么解决办法就是在你每次上传文件完了之后,在后面写上**event.target.value='';**重置一下文件路径,那么重复上传的时候,@change="handfile($event)"才会进行重复触发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 Javascript
JQuery基础语法小结
Feb 27 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
简单实现js页面切换功能
Jan 10 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
layui lay-verify form表单自定义验证规则详解
Sep 18 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 #Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 #Javascript
js实现黑白div块画空心的图形
Dec 13 #Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 #Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 #Javascript
You might like
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
Python学习入门之区块链详解
2017/07/25 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
python pygame模块编写飞机大战
2018/11/20 Python
详解如何用TensorFlow训练和识别/分类自定义图片
2019/08/05 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python如何安装第三方模块
2020/05/28 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python如何获取文件路径/目录
2020/09/22 Python
分享8款纯CSS3实现的搜索框功能
2017/09/14 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
舞蹈比赛获奖感言
2014/02/04 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
毕业论文致谢词
2015/05/14 职场文书
2015年环保局工作总结
2015/05/22 职场文书
英语演讲开场白
2015/05/29 职场文书
初中班长竞选稿
2015/11/20 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技