前言

最近，项目需要新加一个用户发布文章的功能，因为小程序选取的图片都是临时路径，所以需要上传到服务器转为网络图片路径再发布出去。但是小程序上传图片只支持单张图片，在这种情况下图片的上传完成后输出的顺序、判断图片是否全部上传完成等，都是一些需要注意的点。在 Promise 的中有一个 Promise.all 的方法（简单来说就是当所有的异步请求成功后才会执行），在这个方法的帮助下，这些问题都迎刃而解。

代码

export const uploadImage = (tempFilePaths)=>{return new Promise((presolve,preject)=>{if({}.toString.call(tempFilePaths)!='[object Array]'){throw new TypeError(`上传图片参数 tempFilePaths 类型错误!`)}//路径数组为空时  不上传if(tempFilePaths.length==0){presolve([])return}wx.showLoading({title: '上传图片中...',mask:true});getToken().then(token => {let uploads = []tempFilePaths.forEach((item,i)=>{uploads[i] = new Promise ((resolve)=>{wx.uploadFile({url:'http://www.baidu.com/post',filePath: item,name: 'file',header:{'Content-Type':'multipart/form-data'},formData:{appName:tbl,token:token,method:'file',action:'uploadphoto'},success(res){resolve(JSON.parse(res.data).url)},fail(err){console.log(err)wx.hideLoading()}})})})Promise.all(uploads).then(res=>{//图片上传完成presolve(res)wx.hideLoading()}).catch(err=>{preject(err)wx.hideLoading()wx.showToast({title:'上传失败请重试',icon:'none'})})})})
}

思路

1.函数接收一个临时图片路径数组，对传入的参数做一些判断

2.遍历图片路径数组，将每一个上传图片请求封装为promise，依次将这些 promise 对象存入一个数组

3.Promise.all 传入 promise对象数组，当所有的图片都上传成功后，在 then 中接收到上传完成的网络图片数组

注意点

注意点1： wx.uploadFile 中 name 属性填写的是后端接收文件的字段的key（好吧，我自己都不知道我自己在说什么，还是上图吧。。。）

比如，这里后端上传文件的字段为file，在name的属性值填写的就是file 。

注意点2：wx.uploadFile 的 success 函数中输出的数据是字符串，需要JSON.parse转为对象才能使用

最后

Promise.all 接受的数组和输出的数组都是一致的，then方法接收到完成的结果，这样一来就解决了上传图片顺序和所有图片上传完成的问题。

求知若渴，虚心若愚！

每一次解决问题的过程都是对自我的提升！

微信小程序 - Promise 封装多张图片上传相关推荐

[微信小程序] 单张、多张图片上传(图片转base64格式)实践经验
本文首发自个人自有博客:[FaxMiao个人博客],一个关注Web前端开发技术.关注用户体验.记录前端点滴,坚持更多原创,为大家提供高质量技术博文! 定义初始数据: data: {imgList: [ ...
小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...
微信小程序云开发如何实现上传视频以及图片
微信小程序云开发如何实现上传视频以及图片最基础的数据库增删改查,上传到云存储即可实现,附源码 wxml文件 <button bindtap="upload">上传 ...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
微信小程序录音实现功能并上传(使用node解析接收) 发布时间:2020-09-04 11:59:06 来源:脚本之家阅读:97 作者:weixin_43188227 背景我在开发小程序的时候,有 ...
taro开发微信小程序-添加开发者预览,上传测试版本(十四)
taro开发微信小程序,上传测试版本,如果需要访问网络需要打开调试模式,如果配置了https协议的服务,提示对应的服务器证书无效,那么必须正确配置ssl证书,可以在阿里云或者腾讯云申请. 添加开发者预 ...
微信小程序环境下将文件上传到 OSS
步骤 1: 配置 Bucket 跨域客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
微信小程序图片(单图多图上传显示)
微信小程序上传图片组件自定义最近在做微信小程序开发的时候,遇到了一个问题,就是图片上传于显示问题,微信自带的感觉用起来还是不方便,于是就萌生了自定义图片上传于显示组件废话不多说直接上代码首先创建 ...
小程序上传视频的php接口处理,微信小程序[第十二篇] -- 上传视频
通过上一篇的学习,我们可以成功将宝宝的照片传到指定相册了,但是可爱的宝宝岂能只有照片,小视频必须同步跟上,莫问题!咱这篇就来一个视频上传的实现. 俺家小核桃镇贴. 服务端其实对于yii2程序而言,如 ...

微信小程序 - Promise 封装多张图片上传

前言

代码

思路

注意点

最后

微信小程序 - Promise 封装多张图片上传相关推荐

最新文章

热门文章