欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react+Antd+Upload上传图片至OSS,单个文件,多个文件上传

程序员文章站 2022-06-03 11:20:52
...

最近在写一个需求,是批量上传视频到oss,然后自动匹配表格每一项对应的视频地址,,踩了不少坑,用antd的demo来上传oss,发现是全部一次性提交,如果文件小是没有问题的,但是一个文件上百M,同时上传几十个文件会导致上传失败率很高,所以试了很多个网上的demo,踩了不少坑,后来看了下阿里云直接上传文件的样式,有了一个想法,限制下同时上传的个数,比如上传20个,同时上传的个数为3,完成一个再走下一个,这样就会依次去掉接口,不会因为时间太长,导致接口失败。

需求图,通过上传的视频名称和题目名称自动匹配填充到视频地址字段,或者单个视频上传添加
react+Antd+Upload上传图片至OSS,单个文件,多个文件上传

首先是用的antd-Upload手动上传的UI,

render() {
    const { fileList,uploadList,onceObj } = this.state;
    const { text, index,multiple } = this.props;
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,