暂时存着阿里云

// import './App.css';
import React from 'react';
import { Form, Upload, Modal, message, Button } from 'antd';
import { fstat } from 'fs';
import { rejects } from 'assert';
const path = require("path")


// const svg = require('./logo.svg');



let OSS = require('ali-oss');
let client = new OSS({
  region: 'oss-cn-beijing',
  accessKeyId: 'LTAI5tGmEEA7uqBKXdNF9uyj',
  accessKeySecret: '3XW4vKN2sPqAEO3Dmrqcieq2qCpz6k',
  bucket: 'testantd2-12-8',
  endpoint: "oss-cn-beijing.aliyuncs.com",
  // endpoint: "oss-cn-beijing.aliyuncs.com",

});

class AliyunOSSUpload extends React.Component {
  state = {
    resss: {},
    OSSData: {},
    b64:"",
    previewVisible: false,
    previewImage: '',
    fileList: [{
      uid: -1,
      name: 'xxx.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }],
  };

  async componentDidMount() {
    await this.init();
  }

  init = async () => {
    try {
      //发送一个请求请求后端OSS对象
      // const OSSData = await this.mockGetOSSData();


    } catch (error) {
      message.error(error);
    }
  };



  //传递变动列表    自定义请求已经准备，这里只能进行一个展示用
  onChange = async (object) => {
    // object.file  是新进来的或者是新删除的 一个对象
    // object.fileList 是更改以后的 一个数组
    console.log('object:', object);
    console.log('object.fileList:', object.fileList);
    this.setState({ fileList: object.fileList })
  };


  onRemove = async file => {
    const { fileList } = this.state;
    //返回数组中满足这个表达式的元素
    const files = fileList.filter(v => v.uid !== file.uid);
    console.log(' OSS:', file);
    console.log(' files:', files);
    this.setState({ fileList: files })

  };

  handlePreview = async (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };
  handleCancel = async () => this.setState({ previewVisible: false })

  beforeUpload = async file => {
    // listBuckets(file);
    // 判断所选文件是不是符合文件格式，不符合要即使抛出错误

    // Button




    console.log('看看什么时候', file);
    return file;
  };

  Buttonn = async () => {
    try {
      let result = await client.get('5dcd1f7e55a54480.jpg');

      console.log(result);
      this.setState({ resss: result.content })
    } catch (e) {
      console.log(e);
    }

    // 


    let b64 = Buffer.from(this.state.resss).toString('base64');
    this.setState({ b64: b64 })

  }



  // 你可以再哦那嫦娥上传也可以在这里及逆行你验证，然后在另一个函数进行其他上传
  // 一般而言这里是进行验证的，因为这里返回false的话，就不会进行自定义上传了，onchange的事件也没办法进行

  //文件上自定义函数
  doImgUpload = async (options) => {
    const { onSuccess, onError, file, onProgress } = options;
    console.log(options, "zheg shihshenme hgi")
    let res = await client.multipartUpload(file.name, file, {
      progress: (e) => { console.log(e); onProgress({ percent: e * 100 }) }
    })
    onSuccess(res, options.file);//没有这个就会一直想着是正在上传
    //进度条控制

    console.log(res)
    // onError("555",file)


  };
  render() {
    const { fileList } = this.state;
    return (
      <div>
        <Form labelCol={{ span: 4 }}>
          <Form.Item label="Photos" name="photos">
            <Upload
              name='file'
              listType="picture-card"
              onPreview={this.handlePreview}
              onChange={(object) => this.setState({ fileList: object.fileList })}
              onRemove={(files) => { this.setState({ fileList: files }) }}
              fileList={fileList}
              //这里是要研究的东西
              // action="https://oss-cn-beijing.aliyuncs.com"

              beforeUpload={this.beforeUpload}
              customRequest={this.doImgUpload}
            >
              <Button >上传</Button>
            </Upload>
          </Form.Item>
        </Form>

        <Modal
          visible={this.state.previewVisible}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img
            alt="example"
            style={{ width: '100%', }}
            // src={"http://testantd2-12-8.oss-cn-beijing.aliyuncs.com/5dcd1f7e55a54480.jpg?response-cache-control=no-cache"}
            src={'data:image/png;base64,'+this.state.b64}


          />
        </Modal>



        <Button onClick={this.Buttonn}>
          ???
        </Button>
      </div>


    );
  }
}

export default AliyunOSSUpload;