微信小程序封装多张图片上传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 遮罩层实现(mask)实现代码
Jan 09 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
AngularJs页面筛选标签小功能
Aug 01 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
smarty内置函数foreach用法实例
2015/01/22 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
django中send_mail功能实现详解
2018/02/06 Python
linux安装python修改默认python版本方法
2019/03/31 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
丝芙兰法国官网:SEPHORA法国
2016/09/01 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
感恩教育活动总结
2014/05/05 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
英文投诉信格式
2015/07/03 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
MySQL 计算连续登录天数
2022/05/11 MySQL