爬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 antd@2.12.6 --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、获取进度条