使用阿里云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 Client
let 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.name
let 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 + '/' + key
console.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.key
console.log(responseURL)
}
}
})
}
参考资料
-
安装_Browser.js_SDK 示例_对象存储 OSS-阿里云
-
上传文件_Browser.js_SDK 示例_对象存储 OSS-阿里云
-
JavaScript客户端签名直传_Web端PostObject直传实践_Web端上传数据至OSS_最佳实践_对象存储 OSS-阿里云
-
微信小程序直传实践_小程序直传实践_Web端上传数据至OSS_最佳实践_对象存储 OSS-阿里云
-
dd.chooseImage
-
dd.uploadFile
感谢阅读，欢迎评论^-^