使用阿里云OSS上传本地资源(图片、文件、音频、视频)

最新更新时间：2020年08月08日23:44:17

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

背景：在使用阿里云OSS的过程中，通过JavaScript客户端签名直传的方案进行本地资源上传时，在react架构的项目中引入官方提供的Plupload SDK的方案一直上传失败，究其原因是Plupload SDK的方案采用jQuery操作DOM进行上传，通过分析源码发现核心还是传统的formdata格式发送xhr对象上传。

本文内容：记录前端开发过程中在不同场景下使用阿里云OSS上传本地资源的方案。分为三种情况：浏览器端明文(accessKeyId+accessKeySecret)上传资源到阿里云OSS、浏览器端暗文(accessKeyId+signature)上传资源到阿里云OSS、小程序中暗文(accessKeyId+signature)上传资源到阿里云OSS。

浏览器端明文上传

明文上传是指代码中暴露阿里云OSS的账号和密码，存在安全隐患，不建议使用

OSS Browser.js SDK 方案，SDK下载地址请查看文末参考资料链接

//react
render() {return (<div className={styles.contianer}><input type='file' onChange={(e)=>{this.inputChange(e)}} /></div>)
}//阿里云OSS配置信息 需要后端开发人员提供，可以通过接口获取，也可以前端写死
const aliyunConf = {accessKeyId: '',accessKeySecret: '',stsToken: '',endpoint: 'oss-cn-beijing.aliyuncs.com',region: 'oss-cn-hangzhou',bucket: 'bj-wan',
};inputChange(e){let file = e.currentTarget.files[0];const OSS = require('./common/aliyun-oss-sdk-6.9.0.min.js');//阿里云存储对象//实例化OSS Clientlet client = new OSS(aliyunConf);let key = '/wanshaobo/image/2020/09/09/1.png';//文件存放路径// key表示上传到OSS的名字，可自己定义// file浏览器中需要上传的文件，支持HTML5 file 和 Blob类型client.put(key, file).then((aliyunResponse)=>{//上传成功阿里云会返回资源的信息console.log(aliyunResponse)//url name});
}

这个方案采用input的原生js事件onChange获取File对象，如果需要隐藏input标签后面显示的文件名，可以使用样式style={{opacity: ‘0’}}隐藏整个标签，看不见摸得着。

分片上传

//实例化OSS Client
let client = new OSS(this.aliyunConf);
//上传进度条
const progress = (p, checkpoint) => {console.log('上传进度',Math.floor(p* 100)
};
client.multipartUpload(key, file, {progress}).then((aliyunResponse)=>{})

浏览器端暗文上传

暗文上传是指代码中只暴露阿里云OSS的账号，不暴露密码，是一种安全策略。后端生成签名传给前端，前端通过签名将资源上传到阿里云
优点：安全、不需要引入任何依赖

如何生成签名请查看文末参考资料链接

//react
render() {return (<div className={styles.contianer}><input type='file' onChange={(e)=>{this.inputChange(e)}} /></div>)
}//阿里云OSS配置信息 需要后端开发人员提供，只能通过接口动态获取
const aliyunConf = {accessKeyId: "",bucketName: "bj-wan",endpoint: "oss-cn-beijing.aliyuncs.com",keyPrefix: "/wanshaobo/image",policy: "",signature: "",
};inputChange(e){let file = e.currentTarget.files[0];let key = aliyunConfig.keyPrefix + '/2020/09/09' + file.namelet url = 'http://bj-wan.oss-cn-beijing.aliyuncs.com'let formData = new FormData()formData.append('key', key)formData.append('policy', aliyunConfig.policy)formData.append('OSSAccessKeyId', aliyunConfig.accessKeyId)formData.append('success_action_status', '200')formData.append('signature', aliyunConfig.signature)formData.append('file', file)let xhr = new XMLHttpRequest()xhr.onload = function () {// let data = JSON.parse(xhr.responseText)//上传成功阿里云会返回资源的信息let responseURL = url + '/' + keyconsole.log(responseURL)}xhr.onerror = function () {// console.log('fail')}xhr.open('post', url , true)xhr.upload.onloadstart = function(){// console.log('xhr.upload.onloadstart')};xhr.upload.onloadend = function(){// console.log('xhr.upload.onloadend')}//上传进度事件xhr.upload.onprogress = function(result){if (result.lengthComputable) {let percent = (result.loaded / result.total * 100).toFixed(0);console.log(percent);}}xhr.send(formData)//终止http请求// xhr.abort()
}

这个方案采用原生js中的XMLHttpRequest对象和FormData对象进行开发，input的原生js事件onChange获取File对象，如果需要隐藏input标签后面显示的文件名，可以使用样式style={{opacity: ‘0’}}隐藏整个标签，看不见摸得着。

小程序中暗文上传

在钉钉小程序中以上传手机图片为例

小程序api请查看文末参考资料链接

//阿里云OSS配置信息 需要后端开发人员提供，只能通过接口动态获取
const aliyunConf = {accessKeyId: "",bucketName: "bj-wan",endpoint: "oss-cn-beijing.aliyuncs.com",keyPrefix: "/wanshaobo/image",policy: "",signature: "",
};//小程序中DOM
<view slot="plus" class="***" onTap="chooseImage"></view>//监听事件
handleChooseImg(){dd.chooseImage({count: 9,success: (res) => {upload(res.filePaths[0])...upload(res.filePaths[8])},});
}upload(imageTempPath){let url = 'http://bj-wan.oss-cn-beijing.aliyuncs.com'let formData = {key: aliyunConf.keyPrefix + '/2020/09/09' + file.name,//服务器目录加文件名policy: aliyunConf.policy,OSSAccessKeyId: aliyunConf.accessKeyId,success_action_status: 200,signature: aliyunConf.signature}dd.uploadFile({url: url,fileType: 'image',filePath: imageTempPath,fileName: 'file',formData: formData,success: (res) => {if (res.statusCode) {//上传成功阿里云会返回资源的信息let responseURL = url + formData.keyconsole.log(responseURL)}}})
}

参考资料

安装_Browser.js_SDK 示例_对象存储 OSS-阿里云
上传文件_Browser.js_SDK 示例_对象存储 OSS-阿里云
JavaScript客户端签名直传_Web端PostObject直传实践_Web端上传数据至OSS_最佳实践_对象存储 OSS-阿里云
微信小程序直传实践_小程序直传实践_Web端上传数据至OSS_最佳实践_对象存储 OSS-阿里云
dd.chooseImage
dd.uploadFile

感谢阅读，欢迎评论^-^

`打赏我吧^-^`

使用阿里云OSS上传本地资源(图片、文件、音频、视频)相关推荐

SpringBoot整合阿里云OSS上传文件
一.需求分析文件上传是一个非常常见的功能,就是通过IO流将文件写到另外一个地方,这个地方可以是项目下的某个文件夹里,或者是本地电脑某个盘下面,还可以是云服务OSS里面,这里就是我要讲到的OSS,我写 ...
springboot整合阿里云oss上传的方法示例
这篇文章主要介绍了springboot整合阿里云oss上传的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 OSS申请和 ...
spring boot 整合阿里云oss上传
Spring Boot 整合阿里云OSS上传 OSS申请和配置 1. 注册登录 2.开通以及配置 springboot整合使用 1. 进入我们springboot的项目中,导入oss相关依赖 2. ...
阿里云OSS上传请求403问题的完美解决方案及uni.uploadFile h5上传文件失败完美解决方案
在使用阿里云OSS服务时,会用到跨域AJAX上传,上传时报403错误,之前遇到过此类问题并成功解决了,但时间长了遗忘,因此记录下来以备后续学习了解ajax跨域上传OSS. ajax跨域上传首先会发送o ...
阿里云Oss上传（Android版）
写了个简单的阿里云Oss上传,封装成一个类,可以直接使用首先在您的gradle中配置sdk: dependencies {compile 'com.aliyun.dpa:oss-android-sd ...
Java实现阿里云OSS上传文件
推荐:前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.. 点击跳转到网站 1.准备工作:创建操作阿里云OSS许可证阿里云官方文档这里不再赘述,根据官方文档一步步的 ...
Springboot集成阿里云OSS上传及下载
文章目录使用手册 maven依赖及环境配置定义配置bean及OSS工具类定义UploadController和DownloadController 下载接口优化为返回重定向oss路径遇到的问题 ...
Nginx 代理转发阿里云OSS上传的实现代码
这篇文章主要介绍了Nginx 代理转发阿里云OSS上传的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧前言因为小程序上传需要https,服务器https用的是 ...
thinkPHP 阿里云OSS 上传文件、直接下载
阿里云OSS 上传文件.直接下载 1. 安装OSS SDK composer require aliyuncs/oss-sdk-php 2. thinkPHP接口 public function up ...
阿里云OSS上传文件设置请求头
之前写过一篇发送文件消息的,原生input上传文件(聊天发送文件消息),这次的需求就是更改上传地址,使用阿里云OSS上传. 如果想了解阿里云对象存储OSS是如何使用的,请看阿里云存储对象OSS使用讲解 ...

使用阿里云OSS上传本地资源(图片、文件、音频、视频)

最新更新时间：2020年08月08日23:44:17

`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`

浏览器端明文上传

浏览器端暗文上传

小程序中暗文上传

参考资料

`打赏我吧^-^`

使用阿里云OSS上传本地资源(图片、文件、音频、视频)相关推荐

最新文章

热门文章