微信小程序封装多张图片上传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 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jQuery新窗口打开外链接
Jul 21 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
使用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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
Aster vs KG BO3 第一场2.18
2021/03/10 DOTA
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
解析jquery获取父窗口的元素
2013/06/26 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
如何在django中实现分页功能
2020/04/22 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
委托书的格式
2014/08/01 职场文书
2015年爱国卫生月活动总结
2015/03/26 职场文书
在Python中如何使用yield
2021/06/07 Python
Java实现聊天机器人完善版
2021/07/04 Java/Android
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB