目录
1. 本文使用的是js引入形式的阿里云sdk,用npm形式的sdk会需要一些后端的node功能,不能用于web直传。
2. 使用js引入形式的sdk会有一个异步的问题,就是client初始化的时候sdk可能还没加载好,我是在vue的mouted钩子函数内设置了一个定时器,当SDK加载的完成之后再来初始化client
3. 如果你的项目是https环境下的,需要保证初始化client的时候配置secure为true,不然无法上传文件
4. 在默认情况下,保存的图片名会取一个随机的字符串,但是同一张图片多次上传就会保存多个相同图片,这边我做了一个优化,将图片的大小和高宽拼接成一个字符串,再对这个字符串进行md5 hash化处理,这样同一张图片上传多次也只会保存一张
首页 web前端 js教程 vue阿里云上传组件详解

vue阿里云上传组件详解

Jan 30, 2018 pm 05:14 PM
上传 组件 详解

本文主要介绍如何在vue项目中使用web直传方式上传阿里云oss图片,默认读者对vue框架和阿里云oss有一定的了解,整体的流程是加载好阿里云sdk -> 初始化上传客户端client -> 等待文件选择 -> 文件选择进行上传 -> 分发上传结果  

使用过程中我碰到以下的坑:

1. 本文使用的是js引入形式的阿里云sdk,用npm形式的sdk会需要一些后端的node功能,不能用于web直传。

可以直接在html里面加上script标签

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
登录后复制
组件里我包装了一个异步获取sdk的方法LoadJS,感兴趣的可以看一下

2. 使用js引入形式的sdk会有一个异步的问题,就是client初始化的时候sdk可能还没加载好,我是在vue的mouted钩子函数内设置了一个定时器,当SDK加载的完成之后再来初始化client

let timer = setInterval(() => {
  if (window.OSS) {
    this.init()
    clearInterval(timer)
    timer = null
    this.debug && window.console.log('阿里云oss初始化完成')
  } else {
    this.debug && window.console.log('阿里云oss初始化中...')
  }
}, 500)
登录后复制

3. 如果你的项目是https环境下的,需要保证初始化client的时候配置secure为true,不然无法上传文件

4. 在默认情况下,保存的图片名会取一个随机的字符串,但是同一张图片多次上传就会保存多个相同图片,这边我做了一个优化,将图片的大小和高宽拼接成一个字符串,再对这个字符串进行md5 hash化处理,这样同一张图片上传多次也只会保存一张

相关推荐:

浅谈 上传组件 核心架构设计

php 多文件上传组件_PHP教程

JS上传组件FileUpload自定义模板的使用方法_javascript技巧

以上是vue阿里云上传组件详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何安装Win10旧版本组件DirectPlay 如何安装Win10旧版本组件DirectPlay Dec 28, 2023 pm 03:43 PM

不少用户在玩win10的的一些游戏的时候总是会遇到一些问题,比如说卡屏和花屏等等情况,这个时候我们是可以采用打开directplay这个功能来解决的,而且功能的操作方法也很简单。win10旧版组件directplay怎么安装1、在搜索框里面输入“控制面板”然后打开2、查看方式选择大图标3、找到“程序和功能”4、点击左侧的启用或关闭win功能5、选择旧版这里的勾选上就可以了

Win11管理员权限获取详解 Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Windows操作系统是全球最流行的操作系统之一,其新版本Win11备受瞩目。在Win11系统中,管理员权限的获取是一个重要的操作,管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限,以及如何有效地管理权限。在Win11系统中,管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

Oracle SQL中的除法运算详解 Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法运算详解在OracleSQL中,除法运算是一种常见且重要的数学运算操作,用于计算两个数相除的结果。除法在数据库查询中经常用到,因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识,并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

电脑怎么拍照上传 电脑怎么拍照上传 Jan 16, 2024 am 10:45 AM

电脑只要安装了摄像头就可以进行拍照,但是有些用户还不知道该怎么拍照上传,现在就给大家具体介绍一下电脑拍照的方法,这样用户得到图片之后想上传到哪里都可以了。电脑怎么拍照上传一、Mac电脑1、打开访达,再点击左边的应用程序。2、打开后点击相机应用。3、点击下方的拍照按钮就可以了。二、Windows电脑1、打开下方搜索框,输入相机。2、接着打开搜索到的应用。3、再点击旁边的拍照按钮就可以了。

酷狗上传自己的音乐的简单步骤 酷狗上传自己的音乐的简单步骤 Mar 25, 2024 pm 10:56 PM

1、打开酷狗音乐,点击个人头像。2、点击右上角设置的图标。3、点击【上传音乐作品】。4、点击【上传作品】。5、选择歌曲,然后点击【下一步】。6、最后点击【上传】即可。

如何在QQ音乐上传歌词 如何在QQ音乐上传歌词 Feb 23, 2024 pm 11:45 PM

随着数字化时代的到来,音乐平台成为人们获取音乐的主要途径之一。然而,有时候我们在听歌的时候,发现没有歌词是一件十分困扰的事情。很多人都希望在听歌的时候能够显示歌词,以便更好地理解歌曲的内容和情感。而QQ音乐作为国内最大的音乐平台之一,也为用户提供了上传歌词的功能,使得用户可以更好地享受音乐的同时,感受到歌曲的内涵。下面将介绍一下在QQ音乐上如何上传歌词。首先

如何提升电脑上传速度 如何提升电脑上传速度 Jan 15, 2024 pm 06:51 PM

上传速度变得非常慢?相信这是很多朋友用电脑上传东西时候都会遇到的一个问题,在使用电脑传送文件的时候如果遇到网络不稳定,上传的速度就会很慢,那么应该怎么提高网络上传速度呢?下面,小编将电脑上传速度慢的处理方法告诉大家。说到网络速度,我们都知道打开网页的速度,下载速度,其实还有一个上传速度也非常关键,特别是一些用户经常需要上传文件到网盘的,那么上传速度快无疑会给你省下不少时间,那么上传速度慢怎么办?下面,小编给大伙带来了电脑上传速度慢的处理图文。电脑上传速度慢怎么解决点击“开始--运行”或者“窗口键

Angular组件及其显示属性:了解非block默认值 Angular组件及其显示属性:了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装,并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display,Angular组件的显示可以完全控制,从而实现所需的布局和响应能力。

See all articles