微信小程序封装多张图片上传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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
使用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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
用PHP函数解决SQL injection
2006/12/09 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python3实现猜数字游戏
2020/12/07 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
教师绩效工资方案
2014/02/01 职场文书
护士求职自荐信范文
2014/03/19 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
《赶海》教学反思
2014/04/20 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers