爬2.12.6的Antd上传图片坑

爬坑对象

Antd的2.12.6版本（3.x版本没有这个问题）的Upload组件和阿里云oss的 存储对象服务

Antd2.12.6 Upload	Antd3.x以后 Upload
使用beforeUpload的return false，阻止不了默认上传行为（失效），进而导致图片一直在上传中，不显示出缩略图，也会发送上传请求	不会出现这种情况，在上传请求发送前，就能够及时阻断
需要使用自定义上传，也就是api：customRequest来代替默认上传，这样的话就可以使用阿里云OSS	暂未研究

npm命令	作用
npm list antd	可以查看当前使用的版本 , 可以看到路径
npm uninstall antd +npm remove antd	建议直接删除node-modules再重新安装指定版本
npm list -g	查看所有全局安装的模块
https://www.npmjs.com.cn/	官方文档

安装环境 和 设置

请参考官网示例做一个阿里云和antd的Demo
安装阿里云oss服务 官网链接
安装具体的antd版本，npm install [email protected] --save

1、使用npm安装SDK开发包，安装命令为npm install ali-oss --save
公共云下OSS Region和Endpoint对照表：这里千万注意Endpoint的内网地址和公网地址区别！

Error: The region must be conform to the specifications 为避免这个问题，请
参考上面的`公共云下OSS Region和Endpoint对照表`

let OSS = require('ali-oss');
let client = new OSS({
    
  region: 'oss-cn-beijing',				//参考上面链接
  accessKeyId: '账号管理中心',
  accessKeySecret: '账号管理中心',
  bucket: '阿里云文件夹名（桶名）',
  endpoint: "oss-cn-北京.aliyuncs.com",  //参考上面链接，不要写成内网地址了
});

一般而言这个配置是前端发送请求给后端，然后拿到返回的阿里云oss实例，不在前端写死的。
2、可能会有跨域请求需要设置，万一出现403返回，就需要在阿里云OSS控制台进行设置，如果不能解决跨域问题，直接后端多接一个接口，拿到返回的图片临时url。
OSS跨域资源共享（CORS）出现报错的排查方法

具体语法

整体逻辑和实现功能
点击新增图片，会从本地选中一个图片进行自定义上传，到阿里云OSS，前端传文件的时候发送的名字最好使用uuid拼接图片后缀进行重命名，以这个为key发送给后端保存。
点击确定的时候会把组合的key数组发给后端保存
1、初始化，官方文档
可以在工具函数里面写好这一部分阿里云配置

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",
});

2、异步
几乎是每一步都要进行异步操作，异步说明
包括编辑或查看时候从oss拿到图片流或者图片地址等
3、获取进度条

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

4、在一些底层代码里翻功能

最终代码

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")


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 = {
    
    OSSData: {
    },
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  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);
    // 判断所选文件是不是符合文件格式，不符合要即使抛出错误



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

  // 你可以再哦那嫦娥上传也可以在这里及逆行你验证，然后在另一个函数进行其他上传
  // 一般而言这里是进行验证的，因为这里返回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={
    this.state.previewImage}
          />
        </Modal>
      </div>
    );
  }
}

export default AliyunOSSUpload;