小程序使用 Promise.all 完成文件异步上传
小程序使用 Promise.all 完成文件异步上传
extends [微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载 - Kindear - 博客园 (cnblogs.com)]
在上述文章中我们提到了两种文件上传的方式:
使用
for
循环遍历优点:接近并发上传,上传速度较快
缺点:无法保证返回结果的顺序
采用递归方式上传
优点:保证了文件的返回顺序和上传顺序一致,且对服务器负载更小
缺点:由于同步顺序执行上传过程,耗费时间过长
那么有没有一种方式可以让上传异步执行并且保证返回的顺序呢?
鱼与熊掌可以兼得,这波啊,这波不亏
这就引入本篇文章的主角 Promse.all
异步并行机制了
关于Promise
的两种机制,我就不再赘述,请看参考文档
项目结构
|--upload
|--upload.js
|--upload.json
|--upload.wxml
|--upload.wxss
|--profunc.js
本文以云开发图片上传举例
代码展示
profunc.js
const cloudpath = 'baseimg';
function CloudUploadImage(path) {
// 本地文件路径
return new Promise(function (resolve, reject) {
wx.getFileInfo({
filePath: path,
success(ans) {
wx.cloud.uploadFile({
cloudPath: cloudpath + '/' + ans.digest + '.png',
filePath: path,
success: res => {
resolve(res)
},
fail(res) {
reject('upload fail')
}
})
}
})
})
}
module.exports={
CloudUploadImage:CloudUploadImage
}
upload.js
// pages/upload/upload.js
const cwx = require('profunc.js');
Page({
/**
* 页面的初始数据
*/
data: {
imgList:[]
},
UploadImage(){
let imglist = this.data.imgList;
var promisetasks = []
for(var i=0;i<imglist.length;i++){
promisetasks.push(cwx.CloudUploadImage(imglist[i]))
}
wx.showLoading({
title:'图片上传中'
})
Promise.all(promisetasks).then(res=>{
console.log(res)
//具体处理写在如下
})
},
ChooseImage() {
wx.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.data.imgList.length != 0) {
this.setData({
imgList: this.data.imgList.concat(res.tempFilePaths)
})
} else {
this.setData({
imgList: res.tempFilePaths
})
}
}
});
},
ViewImage(e) {
wx.previewImage({
urls: this.data.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
this.data.imgList.splice(e.currentTarget.dataset.index, 1);
this.setData({
imgList: this.data.imgList
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
upload.wxml
<view class="cu-bar bg-white margin-top">
<view class="action">
图片上传
</view>
<view class="action">
{{imgList.length}}/4
</view>
</view>
<view class="cu-form-group">
<view class="grid col-4 grid-square flex-sub">
<view class="bg-img" wx:for="{{imgList}}" wx:key="index" bindtap="ViewImage" data-url="{{imgList[index]}}">
<image src='{{imgList[index]}}' mode='aspectFill'></image>
<view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}">
<text class="cuIcon-close"></text>
</view>
</view>
<view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}">
<text class="cuIcon-cameraadd"></text>
</view>
</view>
</view>
<view class="padding flex flex-direction">
<button class="cu-btn bg-green lg" bindtap="UploadImage">上传</button>
<!-- <button class="cu-btn bg-red margin-tb-sm lg">嫣红</button> -->
</view>
upload.wxss
使用了colorui
样式组件,请参考参考文档下载
/* pages/upload/upload.wxss */
@import '/colorui/main.wxss';
参考文档
小程序使用 Promise.all 完成文件异步上传的更多相关文章
- 文件的上传(表单上传和ajax文件异步上传)
项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举的主要对于小文件上传的处理! 资源下载: 一. ...
- MVC文件上传04-使用客户端jQuery-File-Upload插件和服务端Backload组件实现多文件异步上传
本篇使用客户端jQuery-File-Upload插件和服务端Badkload组件实现多文件异步上传.MVC文件上传相关兄弟篇: MVC文件上传01-使用jquery异步上传并客户端验证类型和大小 ...
- 文件的上传(1)(表单上传和ajax文件异步上传)
文件的上传(表单上传和ajax文件异步上传) 项目中用户上传总是少不了的,下面就主要的列举一下表单上传和ajax上传!注意: context.Request.Files不适合对大文件进行操作,下面列举 ...
- HTML5实现图片文件异步上传
原文:HTML5实现图片文件异步上传 利用HTML5的新特点做文件异步上传非常简单方便,本文主要展示JS部分,html结构.下面的代码并未使用第三发库,如果有参照,请注意一些未展现出来的代码片段.我这 ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 普通文件的上传(表单上传和ajax文件异步上传)
一.表单上传: html客户端部分: <form action="upload.ashx" method="post" enctype="mul ...
- 图片的URL上传至阿里云OSS操作(微信小程序二维码返回的二进制上传到OSS)
当我们从网络中获取一个URL的图片我们要存储到本地或者是私有的云时,我们可以这样操作 把url中的图片文件下载到本地(或者上传到私有云中) public String uploadUrlToOss ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- 文件上传之——用SWF插件实现文件异步上传和头像截取
之前写过几篇文件上传,那些都不错.今天小编带领大家体会一种新的上传方法,及使用Flash插件实现文件上传. 使用Flash的好处就是可以解决浏览器兼容性问题.之前我写的一个快捷复制功能也是利用的Fla ...
随机推荐
- display: inline、block、inline-block、flex和inline-flex
inline 共享一行 不能修改width.height属性,大小由内容撑开 padding属性 top.right.bottom.left设置都有效:margin属性只有left.right设置有效 ...
- 微信小程序(二十)-UI组件(Vant Weapp)-02使用
1.按钮使用 https://vant-contrib.gitee.io/vant-weapp/#/button 1.全局引入,在app.json中引入组件 "usingComponents ...
- Python2和Python3编码的区别
Python2 python2中有两种储存变量的形式,第一种:Unicode:第二种:按照coding头来的. 假设python2用utf8存储x='中文',当你print(x)的时候,终端接收gbk ...
- socket短连接太多,accept次数很多导致主线程CPU占满,工作线程CPU占用率低
1.使用epoll的ET模式: 2.开启reuseport方法: Linux 最新SO_REUSEPORT特性:http://www.mamicode.com/info-detail-2201958. ...
- Spirent Tester二层裸流配置
1.OLT配置 配一个VLAN,若GE口打Tag,不需要打PVID,打Untag,配PVID. 在ONU上配一个Other Bridge Wan链接. 2.TestCenter配置 选定两个TestC ...
- 剑指 Offer 43. 1~n 整数中 1 出现的次数 + 数位模拟 + 思维
剑指 Offer 43. 1-n 整数中 1 出现的次数 Offer_43 题目描述 题解分析 java代码 package com.walegarrett.offer; /** * @Author ...
- AJAX 相关参数详细说明
最近ajax的使用十分频繁,对其许多参数还不是很了解,特此总结. 通用写法 1 $.ajax({ 2 url: "http://www.hzhuti.com", //请求的url地 ...
- Java 语言基础 02
语言基础·二级 顺序结构语句 * A:什么是流程控制语句 * 流程控制语句:可以控制程序的执行流程. * B:流程控制语句的分类 * 顺序结构 * 选择结构 * 循环结构 * ...
- SQL-MYSQL的时间格式转换(持续补充)
======================SQLSERVER===================================== SELECT CONVERT(varchar(100), GE ...
- 如何在 ASP.Net Core 中使用 Lamar
ASP.Net Core 自带了一个极简的 开箱即用 的依赖注入容器,实际上,你还可以使用第三方的 依赖注入容器 来替代它,依赖注入是一种设计模式,它能够有效的实现对象之间的解耦并有利于提高单元测试和 ...