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 相关文章推荐
js 高效去除数组重复元素示例代码
Dec 19 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 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入门学习知识点八 PHP中for循环基本应用之九九乘法口绝表
2011/07/14 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
javascript静态的url如何传递
2007/05/03 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
vue keep-alive请求数据的方法示例
2018/05/16 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
django 模版关闭转义方式
2020/05/14 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
金融专业应届生求职信
2013/11/02 职场文书
考试不及格检讨书
2014/01/09 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
物资采购管理制度
2015/08/06 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS