微信小程序封装多张图片上传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 1.0.2
Oct 11 Javascript
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
围观tangram js库
Dec 28 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
ant design vue中表格指定格式渲染方式
Oct 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中文件上传的安全问题
2006/10/09 PHP
php读取数据库信息的几种方法
2008/05/24 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Node.js Buffer用法解读
2018/05/18 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python实现文本界面网络聊天室
2018/12/12 Python
python之Flask实现简单登录功能的示例代码
2018/12/24 Python
详解python中list的使用
2019/03/15 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
课外活动总结
2015/02/04 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
详解nginx location指令
2022/01/18 Servers
Golang 实现WebSockets
2022/04/24 Golang
如何Python使用re模块实现okenizer
2022/04/30 Python