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
cacf
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.state
return(
<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.state
return 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

一起使用的列子.

原文链接