React + AntD + MD5 前端上传文件到阿里OSS（JS版本）(分片上传，普通上传)

阿里oss配置

1. 文档

   前端直接对接 使用的是官网的这部分：
   https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1490.375926fdoVE8GE
   

2. 配置

   前期配置可参考文章：https://segmentfault.com/a/1190000020963346?utm_source=tag-newest
   描述的十分详细，一定要配置好对应的权限

思路：

1. 初始化（弹窗打开时 初始化）
2. 上传文件时，先不走接口，值储存在form中，这样就会显示出文件的样式，但并未触发请求
3. 整个表单提交的时候，再往阿里云上传，此时区分普通上传或是切片上传，并且头部带上MD5值，切片上传 显示对应的上传进度

Code：

1. 安装ali-oss SDK

   npm install ali-oss
   

2. 初始化页面所有信息

   

    useEffect(() => {
       if (createVisible) {
         form.resetFields();
         setUploadFileList([]);
         setSubmitLoading(false);
         initOssClient();
       }
     }, [createVisible]);
   

   初始化OSS
   
   

3. upload组件处理

   
   
   

4. 表单提交

   
   oss上传
   
   分片上传 暂时只处理了上传进度
   

---

划重点！！！！！

以上就是整体流程！
有很多很坑的地方！！！
比如：

1. 官方的带在头部的md5是这样的：
   
   但其实 JS版本的 好像就不对！
   一定一定要记得大小写是这样的！！

    headers: { 'Content-Md5': md5 },
   

2. 计算MD5值！没有JS版本！！！

   官方：
   我们研究很久以后的结果！：
   

   CryptoJS.MD5(CryptoJS.enc.Latin1.parse(ev.target.result)).toString(CryptoJS.enc.Base64),
   

本文地址：https://blog.csdn.net/qq_40593656/article/details/112555287