微信小程序封装多张图片上传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的一个简单的鼠标跟随提示效果
Sep 23 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
Javascript动画效果(4)
Oct 11 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
webpack入门+react环境配置
Feb 08 Javascript
老生常谈ES6中的类
Jul 31 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
微信小程序身份证验证方法实现详解
Jun 28 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中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
Javascript前端经典的面试题及答案
2017/03/14 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
对pandas处理json数据的方法详解
2019/02/08 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python多线程与多进程及其区别详解
2019/08/08 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
房地产公司见习自我鉴定
2014/04/28 职场文书
个人工作表现评语
2014/04/30 职场文书
网络销售员岗位职责
2015/04/11 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书