暂时存着阿里云

// 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;