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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 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
中国收音机工业发展史
2021/03/02 无线电
无限级别菜单的实现
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
使用js实现数据格式化
2014/12/03 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
javascript实现获取服务器时间
2015/05/19 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
windows下python安装pip方法详解
2020/02/10 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
竞选团支书演讲稿
2014/04/28 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
上班迟到检讨书
2014/09/15 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
委托公证书格式
2015/01/26 职场文书
2015年信访工作总结
2015/04/07 职场文书
高中美术教学反思
2016/02/17 职场文书
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
python playwright之元素定位示例详解
2022/07/23 Python