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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
jquery 可排列的表实现代码
Nov 13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
OpenLayer学习之自定义测量控件
Sep 28 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实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php中文本操作的类
2007/03/17 PHP
PHP中的替代语法简介
2014/08/22 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
Webpack实战加载SVG的方法
2017/12/26 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Python检查ping终端的方法
2019/01/26 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
Django nginx配置实现过程详解
2020/09/10 Python
python map比for循环快在哪
2020/09/21 Python
python热力图实现简单方法
2021/01/29 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
.NET面试10题
2014/02/24 面试题
网络教育自我鉴定
2013/11/01 职场文书
大学新生欢迎词
2014/01/10 职场文书
制作部班长职位说明书
2014/02/26 职场文书
企业法人代表任命书
2014/06/06 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL