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

2022-09-05 13:08:22

阿里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),
  • 作者:cvory
  • 原文链接:https://blog.csdn.net/qq_40593656/article/details/112555287
    更新时间:2022-09-05 13:08:22