1.需求–批量上传图片并且只调用一个接口
方法1
1.调用Promise.all进行上传
注意:少量上传才行数据量大于100可能会导致卡顿就需要方法2!!!
//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