js循环调用接口上传图片

最近接到了一个需求，需要在PC页面上循环调用接口上传图片，最多支持200张。
这可把只会复制粘贴的我给难到了，赶紧理解需求学习学习。

1、分析需求

按钮点击弹出会话框。
点击上传组件Ctrl + A 全选所有图片（不超过200张，每张大小不超过1M）。
点击确定上传循环调用接口，一次请求上传一张图片。
需求1、2 Element Ui 已经给我们提供了一个 Upload 上传组件，只需要拿过来用即可。文件类型及验证同事写了，直接拿过来用。
需求3就自己写吧

2、编写代码

const loading = this.$loading({lock: true,text: '正在上传...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});// function this指向Window，得改成Vue实例对象let this_ = this// 异步改'同步'调用接口async function idUpload(){// forEach等循环不能处理异步代码，换成for形式for (var index = 0; index < this_.file.length; index++) {if(index <= this_.file.length){let formData = new FormData();formData.append("file", this_.file[index]);await postSettleInfoUploadBb(formData).then(res => {// 最后一个图片上传成功后执行if(index == this_.file.length -1){if(res.code == 200){loading.close();this_.visible = false;this_.msgSuccess(res.data);this_.$router.replace({path: "/redirect" + this_.$route.fullPath,});}}}).catch(err => {loading.close();// this_.msgError(`第 ${index + 1} 张图片上传失败`)})}}}idUpload();

参考文章

每天在使用的await，为什么不能用在forEach中？https://blog.csdn.net/qianyu6200430/article/details/108656286
vue循环请求同一个接口，等接口返回数据之后在进行下次循环，同步调用api接口方式https://blog.csdn.net/weixin_40476233/article/details/121292970

js循环调用接口上传图片相关推荐

LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题
LiveNVR拉流视频流媒体平台如何解决JS|axios调用接口时遇到的跨域问题 1.JS调用遇到跨域解决示例 2.axios请求接口遇到跨域问题 2.1.post请求 2.2.get请求 3.RTS ...
使用Postman循环调用接口
今天遇到个问题,需要重复调用一个http接口刷数据,每次调用接口时需要改变传入的参数,于是想到用postman来完成. 首先,新建一个Collections 然后点击Add requests创建请求: ...
微信js sdk图片接口上传图片
开发微信平台网页不可避免的需要调用微信提供的接口.微信JS-SDK提供了方便的调用. 需要实现上传图片更换头像的功能,要用到图片相关的几个接口.根据微信开发者文档的说明,步骤一绑定域名,步骤二引入js ...
【一周工作总结】循环调用接口，和一些Xml格式文件的解析。
上周五,项目组老大,给我提了一下有个关于WebService的项目.由于当时时间仓促,对项目的需求理解出现偏差,导致我做到周二晚,才知道做的东西是方向反了.没办法,只好加加班,努力赶出来了. 1.既然 ...
Postman一个接口多次循环调用
一.在Postman里面创建文件夹,在文件夹里面创建请求二.将请求的参数,进行参数化 aa:"{{a}}", bb:"{{b}}" 参数名是aa和bb a和b ...
for循环异步调用接口，怎样判断数据已经返回完成？
在工作中遇到了一个for循环调用接口的例子:首先要根据一个集群ID,去调用接口查询此集群下的所有"命名空间",接着再用for循环来一个个查询所有"命名空间"下的 ...
调用微信上传图片接口和下载图片接口
目的:调用微信上传图片接口上传图片,并调用下载图片接口下载到本地 1.绑定域名登录微信公众平台后,进入公众号设置-->公众号设置页面如图(1),点击设置如图(2),输入域名后,点击保存. 注 ...
微信开发 --- 调用微信上传图片接口,并保存到自己的服务器
微信开发 - 调用微信上传图片接口,并保存到自己的服务器整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器前几个步 ...
[js] js循环中调用异步的方法，如何确保执行结果的顺序是正确的？
[js] js循环中调用异步的方法,如何确保执行结果的顺序是正确的? An example:let searchApi = function(arg){return new Promise((reso ...

js循环调用接口上传图片

1、分析需求

2、编写代码

参考文章

js循环调用接口上传图片相关推荐

最新文章

热门文章