react使用阿里云对象存储,ali-oss, antd upload to ali-oss

最近写阿里云图片上传,碰到一些小问题,在此总结一下.
项目环境:
create-react-app antd node6.1.0
看了阿里云oss对象存储sdk

直接采用`node` 的安装方式.

在使用的时候碰到了问题.

yield client.put('file', file.url);
=>
TypeError: fs.createReadStream is not a function

看文档要求,换成分片上传,也会存在问题.

yield client.multipartUpload('file', file.url);
=>
TypeError: fs.stat is not a function

问题就是这样,node 的库不在.

没有办法,尝试浏览器上传. 是可以的.

浏览器安装

在index.html 引入包.

  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk.min.js"></script>

可以看快速开始.浏览器方式快速开始.

其实这里说的主要是antd 库的 Upload 集成ali-oss 上传.

import React from 'react'
import {Upload, Modal} from 'antd'class Example extends React.Component{state = {preview: "",visible: false,imageList: [],token: {}}render() {const props = {onRemove: (file) => {this.setState(({ imageList }) => {const index = imageList.indexOf(file);const newFileList = imageList.slice();newFileList.splice(index, 1);return {imageList: newFileList};});},beforeUpload: this.beforeUpload,fileList: this.state.imageList,onPreview: this.handlePreview,accept: "image/*",listType: "picture-card"};const {preview, visible, imageList} = this.statereturn(<div><Upload {...props}>{imageList.length >= 1 ? null : uploadButton}</Upload><Modal visible={visible} footer={null} onCancel={this.handleCancel}><img alt="example" style={{ width: '100%' }} src={preview} /></Modal></div>)}//因为我们需要与表单一起上传,所以默认是不去上传到后台服务器.beforeUpload = file => {let reader = new FileReader();reader.readAsDataURL(file);reader.onloadend = () => {UploadToOss(this, DRIVER_LICENSE_PATH, file).then(data => {this.setState(({ imageList }) => ({imageList: [{uid: file.uid,name: file.name,status: file.status,type: file.type,result: data.name,url: reader.result}],}));})}return false;}handlePreview = (file) => {this.setState({preview: file.url || file.thumbUrl,visible: true,});}componentDidMount(){//使用的sts,向后台服务器请求获取token.// setState({token: "you get result"})}
}const client = (self) => {const {token} = self.statereturn new window.OSS.Wrapper({accessKeyId: token.access_key_id,accessKeySecret: token.access_key_secret,stsToken: token.security_token,region: OSS_ENDPOINT, //常量,你可以自己定义bucket: OSS_BUCKET,});
}const uploadPath = (path, file) => {return `${path}/${file.name.split(".")[0]}-${file.uid}.${file.type.split("/")[1]}`
}const UploadToOss = (self, path, file) => {const url = uploadPath(path, file)return new Promise((resolve, reject) => {client(self).multipartUpload(url, file).then(data => {resolve(data);}).catch(error => {reject(error)})})
}

上面就是upload 和 ali-oss 一起使用的列子.

原文链接

react使用阿里云对象存储,ali-oss, antd upload to ali-oss相关推荐

如何结合PICgo，Typora以及阿里云对象存储OSS搭建自己图床写博客
如何利用阿里云对象存储OSS搭建自己图床写博客 1.购买阿里云购买链接登录阿里云–>控制台–>对象存储OSS–购买购买的时候可以选择按月付费一月一元的,也可以年费9元的,40GB作为 ...
阿里云对象存储OSS之通过URL形式进行图片处理
什么是OSS 阿里云对象存储服务(Object Storage Service,简称 OSS),是阿里云提供的海量.安全.低成本.高可靠的云存储服务.它具有与平台无关的RESTful API接口,能够 ...
阿里云对象存储OSS支持版本管理特性
2019独角兽企业重金招聘Python工程师标准>>> 阿里云对象存储OSS现已经全面支持"对象版本管理"特性.该功能适用于所有的存储类型以及区域.当Bucket ...
阿里云对象存储OSS与文件存储NAS的区别
一.简介应用场景:选择一款存储产品,面向文档数据的存取,不会涉及到数据处理. 产品选型主要从OSS和NAS中选择一款,满足文档存储的需求. 二.NAS优缺点 NAS 是一种采用直接与网络介质相连的特 ...
开启阿里云对象存储OSS防误删新功能，保护您珍贵的数据。
一.背景阿里云对象存储 OSS 是保存海量数据的平台,支持丰富的应用.在使用过程中难免会遇到误操作.程序 Bug.覆盖写等导致数据被删除的场景,对于数据的丢失会非常着急,后果也非常严重,甚至某些情况 ...
阿里云对象存储OSS存储照片
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可 ...
关于阿里云对象存储OSS流量包说明
阿里云对象存储OSS公网出方向流量是收费的,内网产生的流量或者公网入方向流量都是免费的,OSS流量计费方式分为按量付费和包年包月流量包两种计费模式,云吞铺子来详细说下阿里云对象存储OSS流量收费标准价 ...
阿里云对象存储OSS（Object Storage Service）
文章目录简介 endpoint:阿里云服务部署的地区位置见解开发步骤配置文件 utils层(读取全局配置文件并赋值给类变量) service层 impl(基于oss驱动sdk实现类) cont ...
SpringBoot整合——阿里云对象存储（OSS）
SpringBoot整合--阿里云对象存储 1 OSS介绍在开发应用的过程中,我们经常会有用户需要实名认证之后才能访问的需求. 用户认证需要上传证件图片.首页轮播也需要上传图片,因此我们要做文件服务 ...

react使用阿里云对象存储,ali-oss, antd upload to ali-oss

直接采用`node` 的安装方式.

浏览器安装

react使用阿里云对象存储,ali-oss, antd upload to ali-oss相关推荐

最新文章

热门文章

react使用阿里云对象存储,ali-oss, antd upload to ali-oss

直接采用node 的安装方式.

浏览器安装

react使用阿里云对象存储,ali-oss, antd upload to ali-oss相关推荐

最新文章

热门文章

直接采用`node` 的安装方式.