阿里 OSS图片上传 —— 原生JS中使用
前言
这是最近开发遇到的一个坑,"可爱"的前辈们留下来的宝贵财产,很不幸的是,一行注释都没给,所以开心(被迫)的去研究了一下文档.
然而发现官方文档又臭又长,于是自己捣鼓了下,总算是搞出来了.
这里给出两个方案:
- 原生JS(包括jQuery)里如何使用OSS图片上传
- 二是Vue项目如何使用OSS图片上传(晚点写)
OSS 简介及应用场景介绍
1. 全称: Object Storage Service,简称 OSS,是阿里云提供的海量、安全、低成本、高可靠的云存储服务。
2. 它具有与平台无关的RESTful API接口,能够提供99.999999999%的服务持久性。(牛皮就完事了)
使用场景:
- 图片上传
- 视频上传
原生JS使用OSS图片上传
1. 方法的定义
// 方法的定义window.multipartUpload = function multipartUpload(storeAs, file, filename, filetype) {var client = new OSS.Wrapper({accessKeyId: 'youID', // accessKeySecret: 'youSecret', // accessKeyId和accessKeySecret是OSS的访问密钥endpoint: 'http://xxxxx', // OSS对应的区域地址bucket: 'osshanyatemp' // 容器});// 这里可以做一些控制 大小,格式等if (file.size/1024/1024 < 2 || file.size/1024/1024 > 5) {layer.msg("照片大小只能在2~5M之间");return;}console.log(file);client.multipartUpload(storeAs, file).then(function (result) {var reviewUrl = result.url ? result.url : result.res.requestUrls[0].split('?')[0];// 这里可以拿到阿里云返回的临时地址 需要传给后台console.log(reviewUrl) }).catch(function (err) {console.log(err);});}
2. 方法的调用
// 监听图片上传的元素change事件
document.getElementById('uploadImg').addEventListener('change', function (e) {var upload_num = document.getElementById('uploadImg').files.length;var ff = document.getElementById('uploadImg').files;// 做一些相关判断if (ff.length > 8) {layer.msg("最多只能上传8张");return;}// 由于是多图上传,所以要用到循环for (var i = 0; i < upload_num; i++) {var filename = ff[i].name;var filetype = ff[i].type;// 生成10位随机数 原因是阿里云的机制问题// 当我上传完某张图片之后,不可上传同名的图片// 所以加了个随机数,每张图的名字都不一样 let randomNum = getRandom(10);let regStr = palindrome(ff[i].name)filename = randomNum + regStr;// 图片重命名Object.defineProperty(ff[i], 'name', {value: filename,writable: true,configurable: true,enumerable: true,});// 限制格式 png jpegif (filename.indexOf("jpeg") != -1 || filename.indexOf('JPEG') != -1) {var storeAs = "pic/" + new Date().getTime() + '_' + i + file.name;// 方法调用window.multipartUpload(storeAs, ff[i], filename, filetype);} else {alert('上传的格式不正确');return;}}});
阿里 OSS图片上传 —— 原生JS中使用相关推荐
- 记录一个阿里云OSS图片上传错误
upload.js?c0e8:599 POST https://gulimall-.oss-cn-shanghai.aliyuncs.com/ 403 (Forbidden) 今天打开项目运行的时候放 ...
- 使用阿里云的OSS图片上传,这里是用的上传网络流
使用阿里云的OSS图片上传,这里是用的上传网络流 思路: /** 文件上传到OSS 上传网络流 以下代码用于上传网络流: 1.通过element的el-upload插件,通过action发送请求到后台 ...
- 轻松搞定阿里OSS文件上传和图片下载
轻松搞定阿里OSS文件上传和图片下载 目录 1. 阿里云oss账号准备 1.1 注册阿里云账号,并开通OSS存储服务 1.2 创建RAM子用户并使用子账户的AccessKeyId和Access ...
- 阿里云对象存储OSS图片上传并回显
阿里云对象存储OSS图片上传并回显 Java代码实现 引入依赖 <!-- 引入阿里云OSS依赖--><dependency><groupId>com.aliyun. ...
- 若依-vue图片上传本地改OSS前台以及后台-附带oss图片上传工具类
阿丹: 在二次开发若依的过程中发现若依的图片上传的默认的是在本地,在spring-vue版本中,如果要将平台上线那么就需要考虑这个问题,要使用fastdfs或者oss来完成代替本地的图片上传. 本篇文 ...
- dcat-admin oss图片上传
dcat-admin oss图片上传 安装插件 composer require jacobcyl/ali-oss-storage:^2.1 在app.php的provider数组中添加: Jacob ...
- Android简单实现将手机图片上传到服务器中
在本例中,将会简单的实现安卓手机将图片上传到服务器中,本例使用到了 服务器端:PHP+APACHE 客户端:JAVA 先简单实现一下服务器端的上传并测试上传效果,看实例 <?php if(emp ...
- flutter阿里云OSS图片上传
一.选择图片: 使用插件 image_picker: "^0.5.0+3" 使用image_picker选择图片,代码如下: // 相机拍照或者从图库选择图片pickImage(c ...
- antd上传组件upload+阿里oss实现上传功能
antd上传组件upload+阿里oss实现上传功能 阿里oss上传是目前前端同事比较习惯使用的上传方式,同样的上传方式还是七牛等,下面记录以下阿里oss上传的使用步骤: 最近在写后台管理系统,遇到上 ...
- wordpress如何能实现直接粘贴把图片上传到服务器中
当前功能基于PHP,其它语言流程大抵相同. 大概流程: 1. 将docx文件上传到服务器中 2. 使用PHPoffice/PHPword实现将word转换为HTML 3. 将HTML代码返回并赋值到编 ...
最新文章
- maven私有库搭建
- 697. Degree of an Array 频率最高元素的最小覆盖子数组
- 如何用C语言清空特定文件夹中的所有文件
- Python中随机森林的实现与解释
- cross component navigation in HCP
- Sql Server常用函数及技巧
- 其实没事做,写写博客也不错的
- mac下flink的wordcount案例
- 年轻人,被领导骂是怎样一种感觉?
- 奇妙的等式 精妙的证明(二)
- 小额现金贷用户群体分析及风控体系搭建
- cc2530c语言编程库,cc2530程序设计实例之CC2530 RF部分使用—实现点对点收发
- 乌龟git配置ssh密钥
- python tkinter界面随分辨率自动调整尺寸_如何使pythonttkinter文本在按钮和标签中自动调整大小?...
- 【CodingNoBorder - 04】无际软工队 - 求职岛:技术规格说明书
- 异构数据库、异构数据源、分布式数据库三者的辨析区别
- matlab各次谐波含量,与谐波相关的基本概念
- 内存条编号意义--怎么看内存条型号大小
- #运算符 ##预算符
- JQuery开发手册