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

灰太狼 2022-11-25 11:57 562阅读 0赞

###### *最新更新时间：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-]
 *  [上传文件\_Browser.js\_SDK 示例\_对象存储 OSS-阿里云][Browser.js_SDK _ OSS- 1]
 *  [JavaScript客户端签名直传\_Web端PostObject直传实践\_Web端上传数据至OSS\_最佳实践\_对象存储 OSS-阿里云][JavaScript_Web_PostObject_Web_OSS_ OSS-]
 *  [微信小程序直传实践\_小程序直传实践\_Web端上传数据至OSS\_最佳实践\_对象存储 OSS-阿里云][Web_OSS_ OSS-]
 *  [dd.chooseImage][]
 *  [dd.uploadFile][]

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[Browser.js_SDK _ OSS-]: https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1361.3e473ecaHZuqC7
[Browser.js_SDK _ OSS- 1]: https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1325.7db42916q8FtxJ
[JavaScript_Web_PostObject_Web_OSS_ OSS-]: https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1560.703f4367DaAAGM
[Web_OSS_ OSS-]: https://help.aliyun.com/document_detail/92883.html?spm=a2c4g.11186623.6.1557.391a49e8VMZ11l
[dd.chooseImage]: https://ding-doc.dingtalk.com/doc#/dev/media-image/dd.chooseImage
[dd.uploadFile]: https://ding-doc.dingtalk.com/doc#/dev/frd69q/l4Xv3
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460