微信小程序封装多张图片上传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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
详解Vue2 SSR 缓存 Api 数据
Nov 20 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
python中os包的用法
2020/06/01 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
小学班干部竞选演讲稿
2014/04/24 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
给老师的感谢信
2015/01/20 职场文书
手术室护士个人总结
2015/02/13 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫
python获取带有返回值的多线程
2022/05/02 Python