阿里oss配置
文档
前端直接对接 使用的是官网的这部分:
https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1490.375926fdoVE8GE配置
前期配置可参考文章:https://segmentfault.com/a/1190000020963346?utm_source=tag-newest
描述的十分详细,一定要配置好对应的权限
思路:
- 初始化(弹窗打开时 初始化)
- 上传文件时,先不走接口,值储存在form中,这样就会显示出文件的样式,但并未触发请求
- 整个表单提交的时候,再往阿里云上传,此时区分普通上传或是切片上传,并且头部带上MD5值,切片上传 显示对应的上传进度
Code:
安装ali-oss SDK
npm install ali-oss
初始化页面所有信息
useEffect(()=>{if(createVisible){ form.resetFields();setUploadFileList([]);setSubmitLoading(false);initOssClient();}},[createVisible]);
初始化OSS
upload组件处理
表单提交
oss上传
分片上传 暂时只处理了上传进度
划重点!!!!!
以上就是整体流程!
有很多很坑的地方!!!
比如:
官方的带在头部的md5是这样的:
但其实 JS版本的 好像就不对!
一定一定要记得大小写是这样的!!headers:{'Content-Md5': md5},
计算MD5值!没有JS版本!!!
官方:
我们研究很久以后的结果!:CryptoJS.MD5(CryptoJS.enc.Latin1.parse(ev.target.result)).toString(CryptoJS.enc.Base64),