微信小程序封装多张图片上传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 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
论坛头像随机变换代码
2006/10/09 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python标准库与第三方库详解
2014/07/22 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
工商管理应届生求职信
2013/10/07 职场文书
高一物理教学反思
2014/01/24 职场文书
表彰先进的通报
2014/01/31 职场文书
商场主管竞聘书
2014/03/31 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
春节随笔
2015/08/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书
68句权威创业名言
2019/08/26 职场文书
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android