爬坑对象
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、获取进度条