微信小程序封装多张图片上传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 相关文章推荐
小议Javascript中的this指针
Mar 18 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
vue实现页面滚动到底部刷新
Aug 16 Javascript
我所理解的JavaScript中的this指向
Sep 04 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 调用远程url的六种方法小结
2009/11/02 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
js实现动态添加上传文件页面
2018/10/22 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
举例讲解Python常用模块
2019/03/08 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
python实现月食效果实例代码
2019/06/18 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
家长给老师的道歉信
2014/01/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
家长对学生的评语
2014/04/18 职场文书
上课说话检讨书500字
2014/11/01 职场文书
学风建设主题班会
2015/08/17 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫