微信小程序封装多张图片上传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文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
js仿拉勾网首页穿墙广告效果
Mar 08 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 结果集的分页实现代码
2009/03/10 PHP
关于php fread()使用技巧
2010/01/22 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
浅谈php的优缺点
2015/07/14 PHP
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
javascript闭包的理解
2015/04/01 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python实现Windows电脑定时关机
2018/06/20 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python批量爬取下载抖音视频
2019/06/17 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python autoescape标签用法解析
2020/01/17 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
成人毕业生自我鉴定
2013/10/18 职场文书
生产车间主任的个人自我鉴定
2013/10/25 职场文书
计算机专业推荐信范文
2013/11/27 职场文书
精神文明建设标语
2014/06/16 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书