微信小程序封装多张图片上传api代码实例


Posted in Javascript onDecember 30, 2019

这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

export default class Upload{
  constructor(object) {
    this.obj = {
      count:1,
      sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType:['album','camera'],  // 可以指定来源是相册还是相机,默认二者都有
    }
    if(Object.prototype.toString.call(object) === "[object Object]"){
      Object.assign(this.obj, object);
    }else{
      uni.showToast({
        title: '参数必须为对象',
        icon:"icon",
        duration: 2000
      });
    }
     
 
    return this;
  }
  // 上传图片 返回一个图片的数组集合
  async uploadPic(){
    let chooseImageResult = await this.chooseImage()
    console.log("选择图片",chooseImageResult)
 
    let imgArr = await chooseImageResult.tempFilePaths.map(async (item,index) => {
      uni.showLoading({
        title: `正在上传第${index+1}张`
      });
      let uploadFileResult = await this.uploadFile(item)
 
      console.log("上传图片过程",uploadFileResult)
      return getApp().globalData.img_prefix + uploadFileResult.data.file.url;
    })
 
    return new Promise((resolve,reject) => {
      Promise.all(imgArr).then((result)=>{
         
        uni.hideLoading();
        uni.showToast({
          title: '上传成功',
          icon:"none",
          duration: 2000
        });
        console.log("上传图片结果",result)
        resolve(result)
      })
    }) 
  }
  uploadFile(file){
    return new Promise((resolve, reject) => {
      uni.uploadFile({
       url: 'https://baidu.com/upload/', //此处是你自己上传接口
       filePath: file,
       name: 'file',
       success: function (res) {
        var data = res.data;
        resolve(JSON.parse(data))
         
       },
       fail: function (res) {
        reject("上传失败")
        
       },
       complete: function (res) {
        uni.hideToast();
       }
      })
    })
  }
  chooseImage(){
    return new Promise((resolve,reject) => {
      uni.chooseImage({
        count: this.obj.count,//1, // 默认9
        sizeType: this.obj.sizeType,//['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: this.obj.sourceType,//['album','camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          // console.log(res)
          resolve(res)
        },
        fail:function(){
          reject("选择文件失败")
        }
      })
    })
  }
}

使用实例

let object = {
  count:1,
  sizeType:['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType:['album','camera'],  // 可以指定来源是相册还是相机,默认二者都有
}
let result = await new Upload(object).uploadPic();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现随机化快速排序的实例代码
Aug 01 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详解JS数值Number类型
Feb 07 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 #Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 #Javascript
JavaScript switch语句使用方法简介
Dec 30 #Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 #Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 #Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
Vue实现星级评价效果实例详解
Dec 30 #Javascript
You might like
php 字符串函数收集
2010/03/29 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
禁止js文件缓存的代码
2010/04/09 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
python字符串string的内置方法实例详解
2018/05/14 Python
python爬取个性签名的方法
2018/06/17 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python换行与不换行的输出实例
2020/02/19 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
中专生自我鉴定范文
2014/02/02 职场文书
捐助倡议书范文
2014/04/15 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis