使用阿里云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

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

打赏我吧^-^