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.state
    return(
        
{ imageList.length >= 1 ? null : uploadButton } null} onCancel={this.handleCancel}> <span"example" style={{ width: '100%' }} src={preview} />
)
} //因为我们需要与表单一起上传,所以默认是不去上传到后台服务器. 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) }) }) }

上面就是uploadali-oss 一起使用的列子.

  • 原文链接

你可能感兴趣的:(ant-design,reaact)