小程序使用 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 ...
随机推荐
- 微信小程序:数组拼接
一开始用concat进行拼接,总是不行,代码如下: handleItemChange(e){ console.log(e) var itemList = e.detail.value itemList ...
- 死磕Spring之IoC篇 - 解析自定义标签(XML 文件)
该系列文章是本人在学习 Spring 的过程中总结下来的,里面涉及到相关源码,可能对读者不太友好,请结合我的源码注释 Spring 源码分析 GitHub 地址 进行阅读 Spring 版本:5.1. ...
- JUnit5学习之六:参数化测试(Parameterized Tests)基础
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Django-1.11中文文档-模型Models(一)
官方文档链接 模型是数据信息的唯一并明确的来源.它包含了我们储存的数据的基本字段和行为.通常,每个模型映射到一张数据库表. 基本概念: 每个模型都是django.db.models.Model的一个子 ...
- C++的指针,引用,指向指针的引用和Java中的引用
#include <iostream> #include<algorithm> using namespace std; class Test { public: Test(i ...
- React函数式组件和类组件[Dan]
一篇对Dan的 How Are Function Components Different from Classes? 一文的个人阅读总结,内容来自于此.强烈推荐阅读 Dan Abramov.的博客. ...
- KL散度相关理解以及视频推荐
以下内容基于对[中字]信息熵,交叉熵,KL散度介绍||机器学习的信息论基础这个视频的理解,请务必先看几遍这个视频. 假设一个事件可能有多种结果,每一种结果都有其发生的概率,概率总和为1,也即一个数据分 ...
- C语言之结构体内存的对齐
C语言之结构体内存的对齐 大纲: 零.引例 一.结构体内存对齐规则 二.怎样计算结构体的大小 三.设计结构体时要注意的方面 四.为什么存在内存对齐 五.修改默认对齐数 在前面的章节中,我们谈到了C ...
- 第七届蓝桥杯省赛JavaB组——第十题压缩变换
题目: 压缩变换小明最近在研究压缩算法.他知道,压缩的时候如果能够使得数值很小,就能通过熵编码得到较高的压缩比.然而,要使数值很小是一个挑战.最近,小明需要压缩一些正整数的序列,这些序列的特点是,后面 ...
- key解析
密钥在不同实体之间传递,因此密钥必须可以序列化. 所有密钥三个特性: 算法:密钥使用的算法,如DES和DSA等,通过getAlgorithm()获取算法名 编码形式:密钥的外部编码形式,如X.509, ...