使用阿里云OSS上传本地资源(图片、文件、音频、视频)_万少博的博客-程序员ITS203_oss上传音频

技术标签: web前端开发  

最新更新时间: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)
			}
		}
	})
}

参考资料

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

打赏我吧^-^

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wanshaobo888/article/details/107887343

智能推荐

大批量图片打包zip下载_(公众号)AI大数据云课堂的博客-程序员ITS203_1400张照片压缩包下载

使用插件&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/s...

windows下使用PHP实现定时执行脚本_phpsea的博客-程序员ITS203_windows定时执行php

一直以来,使用PHP定时运行脚本都是让大家头痛的问题,但是我们确实可以利用windows的计划任务来定时调用PHP脚本,当然这还要感谢PHP.exe。下面,站长将向大家介绍,如何来实现。目标:根据系统时间定时执行PHP脚本,不需要人工运行(这里以定时新建一个文本文件并写入内容为例)解决步骤:1、建立PHP脚本,如下:file_put_contents('D:\w

SpringBoot入门---错误页面原理解析_呐呐呐-的博客-程序员ITS203

springboot错误页面原理以下会提到的重点类:BasicErrorController 基础错误控制器DefaultErrorViewResolver 默认错误视图解析器DefaultErrorAttributes 默认错误属性类ErrorPageCustomizer 错误页面定制器ErrorMvcAutoConfiguration 错误mvc自动配置类package org.springframework.boot.autoconfigure.web.servlet

java中scene的作用_Sceneform SDK可以访问ARCore SDK的所有功能吗?_黄继新的博客-程序员ITS203

使用Sceneform时,Android上的ARCore的所有功能都可用 . 最常见的用例非常简单,例如在地板平面上处理对象 .您可以通过调用Scene.setOnUpdateListener()然后在侦听器调用ArSceneView.getArFrame()中设置Scene侦听器来执行每帧操作 .例如protected void onCreate(Bundle savedInstanceStat...

PHP文件上传操作实例详解(包含上传文件类型MIME验证)_Houzhyan的博客-程序员ITS203

本文实例分析了PHP文件上传操作。分享给大家供大家参考,具体如下:文件上传发生在浏览器向服务器发出的请求中。文件,对于浏览器来讲,就是表单中的一个特殊类型的数据而已。浏览器表单中的数据,两种类型:字符串类型(字节流编码)文件类型(二进制编码),文件是表单数据中一部分服务器角度:在接受浏览器请求时,处理好表单内的数据。根据数据类型不同使用不同处理方法:字符串类型,

随便推点

Flask Web开发实战(入门、进阶与原理解析)_weixin_30439031的博客-程序员ITS203

URL重定向错误响应&gt; 如果你想手动返回错误响应,可以使用Flask提供的abort()函数。XML上下文全局变量[](https://img2018.cnblogs.com/blog/1608688/201903/1608688-20190318132815407-1224791002.Flask中的上下文变量激活上下文在请求处理时两者有相同的生命周期...

vue-cli4.3 Vue脚手架的安装和使用_Piconjo_Official的博客-程序员ITS203

注:使用前需先安装Nodejs首先 安装vue-cli:npm install -g @vue/cli创建一个新项目:vue create 项目名1、选择默认(default)还是手动(Manually):回车进行确认2、选中要安装的组件:上下箭头移动 空格选择/取消 回车确认3、选择项目所需的功能:4、选择语法检查方式:Lint on save表示保存就检测Li...

什么是字体?_myhc的博客-程序员ITS203

什么是字体?百度百科里面是如下解释的:“文字的外在形式特征。就是文字的风格,是文字的外衣。字体的艺术性体现在其完美的外在形式与丰富的内涵之中。字体是文化的载体,是社会的缩影。”维基百科里面是如下解释的:“字体(英语:typeface或font family)在书法和印刷领域是指文字的式样。”我的理解是,字体是文字书面化的样式载体,定义文字是如何写/画在书面上规则。知道为什么我们能清晰的分辨...

linux系统的ftp命令大全,linux系统ftp命令(示例代码)_飞翔的十号的博客-程序员ITS203

先来一段简单的ftp 下载脚本ftp -i -n&lt;open 14.2.33.211user etl etlcd /etlfile/ftpfilelcd /etlfile/getfilebinarypromptmget *promptclosebyeEOFftp安装部分,操作步骤如下:可以使用yum命令直接安装ftp#yuminstallvsftpdftp服务的开启与关闭命令:开启:#...

HTTP/1.0和HTTP/1.1的区别,HTTP怎么处理长连接_SaiW-n_n-的博客-程序员ITS203_http/1.1

1.HTTP简介  web浏览器和服务器之类的交互过程必须遵守的协议.他是tcp/ip中的一个应用协议。用来协议数据交换过程和数据本身的格式.主要的有HTTP/1.0和HTTP1.1.   HTTP/1.0和HTTP/1.1都把TCP作为底层的传输协议。  HTTP客户首先发起建立与服务器TCP连接。一旦建立连接,浏览器进程和服务器进程就可以通过各自的套接字来访问TCP。如

ElasticSearch:相关性评分原理及应用_pbrong的博客-程序员ITS203_elasticsearch 之空值相关度 原理讲解

相关度是指两个事物间相互关联的程度,在检索领域特指检索请求与检索结果之间的相关程度。在ES中返回的每一条结果中都会包含一个_score字段,这个字段的值就是当前文档匹配检索请求的相关性评分。

推荐文章

热门文章

相关标签