前端(react)上传到阿里云OSS存储 实例
需求背景
由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储。
- 阿里云OSS
阿里云OSS文档介绍,这里不做过多赘述
安装
原本在最开始的时候,是使用node版本的SDK,最开始使用的[nodejs版本]
代码如下
async function put() {try {let result = await client.put('qq.mp4', fileObj);console.log(result);} catch (err) {console.log(keyObject.AccessKeyId);console.log(keyObject.AccessKeySecret);console.log(keyObject.SecurityToken);console.log(err);}}put();
开始上传图片的时候还没有翻车,但是上传超过30多M的时候,就翻车了,在阿里云OSS后台查看文件大小为0KB
本来是想用fs模块来操作文件的,但是发现fs在浏览器端,没法儿使用所以就放弃了nodejs版本的SDK
browser版本
后面仔细查阅文档, 发现browser版本SDK有一个片段上传的文档,于是就采用了[browser]版本。
使用 browser版本的SDK支持片段上传,同时可以通过片段上传返回回来的进度,制作进度条提示,方便操作业务逻辑
let ossConfig = {region: 'oss-cn-hangzhou',//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。accessKeyId: keyObject.AccessKeyId,accessKeySecret: keyObject.AccessKeySecret,stsToken: keyObject.SecurityToken,bucket: 'wesmart-app'}let tempCheckpoint;// 定义上传方法。async function multipartUpload() {try {// object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。let result = await client.multipartUpload('02', fileObj, {progress: function (p, checkpoint) {// 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。tempCheckpoint = checkpoint;console.log(p);console.log(checkpoint);},mime: 'video/mp4'})} catch (e) {console.log(e);}}
- client.multipartUpload方法
第一个参数为自定义的上传文件的名称,建议使用时间戳进行后缀命名,保证文件的唯一性,不会被覆盖
第二个参数为文件 回调函数progress,可以查看上传的进度以及文件的相关信息
注意事项
上面需要的对象字段可以通过阿里云后台OSS进行查看,在开发的过程中,个人建议通过请求后端返回的相关key值进行操作
在上传代码的时候,使用的put请求,而且刚开始会报错跨域的问题,需要在阿里云OSS进行配置允许请求
Exresponse Header设置为etag
源码
import React, { useState, useEffect } from 'react';
import axios from "axios";
const OSS = require('ali-oss');
class Example extends React.Component {state = {count: 0,keyObject: {},upfile: "",}componentDidMount() {this.getData();}getData() {let that = this;axios.get('获取keyId的接口地址').then(function (response) {console.log(response);let { status, data } = response;if (status == 200) {that.setState({keyObject: data});}}).catch(function (error) {console.log(error);});}handleUpload() {let { keyObject, upfile } = this.state;var fileObj = document.getElementById("file").files[0];console.log(fileObj);console.log(keyObject);let ossConfig = {region: 'oss-cn-hangzhou',//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。accessKeyId: keyObject.AccessKeyId,accessKeySecret: keyObject.AccessKeySecret,stsToken: keyObject.SecurityToken,bucket: 'wesmart-app'}let client = new OSS({region: 'oss-cn-hangzhou',//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS。accessKeyId: keyObject.AccessKeyId,accessKeySecret: keyObject.AccessKeySecret,stsToken: keyObject.SecurityToken,bucket: 'wesmart-app'});// async function put() {// try {// let result = await client.put('qq.mp4', fileObj);// console.log(result);// } catch (err) {// console.log(keyObject.AccessKeyId);// console.log(keyObject.AccessKeySecret);// console.log(keyObject.SecurityToken);// console.log(err);// }// }// put();let tempCheckpoint;// 定义上传方法。async function multipartUpload() {try {// object-key可以自定义为文件名(例如file.txt)或目录(例如abc/test/file.txt)的形式,实现将文件上传至当前Bucket或Bucket下的指定目录。let result = await client.multipartUpload('02', fileObj, {progress: function (p, checkpoint) {// 断点记录点。浏览器重启后无法直接继续上传,您需要手动触发上传操作。tempCheckpoint = checkpoint;console.log(p);console.log(checkpoint);},mime: 'video/mp4'})} catch (e) {console.log(e);}}// 开始分片上传。multipartUpload();// 暂停分片上传。client.cancel();// 恢复上传。let resumeclient = new OSS(ossConfig);async function resumeUpload() {try {let result = await resumeclient.multipartUpload('02', fileObj, {progress: function (p, checkpoint) {tempCheckpoint = checkpoint;console.log(p);console.log(checkpoint);},checkpoint: tempCheckpoint,mime: 'video/mp4'})} catch (e) {console.log(e);}}resumeUpload();}handleChange(e) {e.persist();this.setState({ upfile: e.target.value });}render() {const { upfile } = this.state;return (<div><script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-x.x.x.min.js"></script><p><input id="file" type="file" onChange={this.handleChange.bind(this)} value={upfile} /></p><button onClick={this.handleUpload.bind(this)}>上传</button></div>)}}export default Example;
文章个人博客地址:前端(react)上传到阿里云OSS存储 实例
欢迎关注公众号:程序猿布欧,不定期更新一些前端入门文章
创作不易,转载请注明出处和作者。
前端(react)上传到阿里云OSS存储 实例相关推荐
- mysql数据库备份到oss_备份MySQL数据库并上传到阿里云OSS存储
1. 环境配置 要将本地文件上传到阿里云oss中, 必须使用阿里云提供的工具 ossutil, 有32位,也有64位的, Linux和Windows都有.具体可以到阿里云官网下载 本文以Linux系统 ...
- vue前端直接使用element-ui的upload组件上传到阿里云OSS存储
因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快 (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过) ...
- 图片上传到阿里云OSS存储
首先我们需要申请阿里云账号 进行购买OSS云存储 一.开通"对象存储OSS"服务 申请阿里云账号.实名认证.进入管理控制台 二.创建Bucket 根据自身需求 ,一般选择标准存储 ...
- linux centos8 将指定本地目录下的文件上传到阿里云OSS上
使用场景:为了解决高并发问题,尤其带宽限制(阿里云最高200M,当前首页一个用户请求4M的资源,导致带宽跟不上),jenkins打包vue下的前端静态资源上传到阿里云OSS上 前提工作:因工具是jav ...
- 一步步带你实现一个简单的express服务器,能让vue通过axios请求将图片上传到阿里云OSS
文章目录 前言 一.申请阿里云OSS 二.Vue前端读取图片 三.将图片base64转成二进制文件 四.搭建express服务器 五.通过axios给服务器发送请求 六.发送图片并上传阿里云 我们首先 ...
- Linux环境Shell脚本上传下载阿里云OSS文件
为什么80%的码农都做不了架构师?>>> Linux环境Shell脚本上传下载阿里云OSS文件 背景 工作中由于我们项目生成的日志文件比较重要,而本地磁盘空间有限存储不了多久, ...
- 图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤 导包 <dependency><gr ...
- Android从相册中选取图片上传到阿里云OSS
在开发APP软件中,boss突然提出想在软件中添加一个多张照片上传的功能,作为菜鸟的我,琢磨了两天,才弄出来,今天特地贴出来.本篇博客主要介绍的是将本地图片上传到服务器的方法技巧.主要技术点是: 一. ...
- 微信头像下载并上传到阿里云OSS,PHP文件上传到阿里云OSS简单代码(OSS文件上传,微信头像下载,CURL下载文件,微信头像链接过期)
(就这么个小事,有多少公司多少项目没做到!!) 微信公众号项目,后端获取到授权用户的微信头像后,要自行下载保存,不下载的话,微信返回的头像链接会在一段时间后过期,无法访问! 下面是我写的两个简单实用方 ...
最新文章
- CentOS 7安装GNOME图形界面并设置默认启动
- python面对对象编程-------5:获取属性的四种办法:@property, __setattr__(__getattr__) ,descriptor...
- 电缆的验证、鉴定和认证应该选择什么测试工具
- 牛客网笔记之数组(一)
- CVPR2020 Oral|场景去遮挡新方法:港中文首次提出自监督新框架,已开源
- 数字图像处理-美图秀秀:大眼算法
- VS2015 Visual Assist X 破解版安装教程
- 图灵的遗产和后继者们的责任
- laravel7 LogicException Please make sure the PHP Redis extension is installed and enabled
- 大一新生计算机课word知识,大一计算机结业论文
- 人工智能--黑白图片上色
- android友盟微信分享到朋友圈,2020年友盟分享到微信朋友圈
- Grub引导项修复详解
- Java检测IP地址输入是否正确
- yolov5 训练时报错踩坑(不定时更新)
- 蒲丰投针计算机模拟ppt,蒲丰投针实验模课件.doc
- Java基础之MySQL(二)
- 「小组联考」第二周三次考试
- 美国计算机硕士学校,美国计算机硕士不同学校申请难度大盘点(下篇)
- android图片加载过程,教你写Android ImageLoader框架之图片加载与加载策略