前端react关于批量上传图片只调用后端一个接口,循环调用或者一个一个调用（vue方法同理）

1.需求–批量上传图片并且只调用一个接口

方法1

1.调用Promise.all进行上传
注意：少量上传才行数据量大于100可能会导致卡顿就需要方法2!!!

不会使用Promise.all点击进入学习！

//fileList代表图片数组
const uploadMaterial = (formBody, fileList, callback) => {
    let promiseArr = [];
    fileList.forEach(ele => {
      let obj = { ...formBody, file: ele.originFileObj };
      let formData = new FormData();
      for (const key in obj) {
        if (Object.hasOwnProperty.call(obj, key)) {
          const element = obj[key];
          formData.append(key, element);
        }
      }
      promiseArr.push(addClip(formData));
    });

// Promise.all统一调用
 Promise.all(promiseArr).then(resArr => {
      if (resArr[0] && resArr[0].code === 0) {
        message.success('上传成功');
      } else {
        message.success('上传失败');
      }
      callback();
      setUploadModalVisible(false);
      init();
    });
  };

方法2

模拟的接口调用，成功一张照片在执行下一张照片

import React, { useEffect, useState } from 'react'
import { getSymbollist } from '../../services/transaction.js'
function index() {
  let cutter = 0//用来判断循环第几次了
  function SCallback() {
    let arrayList = [1, 2, 3, 4, 5, 6] //模拟图片数组123
     //循环列表
    getSymbollist().then((res) => {
      cutter++
      if (res.status == 200) {
        if (cutter == arrayList.length) {
          console.log(arrayList.length, cutter, cutter / arrayList.length * 100, '进度');
          return
        } else {
          setTimeout(() => {
            //回调函数
            SCallback()
          }, 1000)
          console.log(cutter / arrayList.length * 100, '进度');
        }

      }else{
        console.log('上传失败');
      }
    })
  }
  useEffect(() => {
    SCallback()
  }, [])
  return (
    <div>
     
    </div>
  )
}

export default index