微信小程序封装多张图片上传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 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
js实现照片墙功能实例
Feb 05 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 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水印技术
2007/02/14 PHP
PHP6 先修班 JSON实例代码
2008/08/23 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
两种设置php载入页面时编码的方法
2014/07/29 PHP
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
详解a++和++a的区别
2017/08/30 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
使用Vue实现一个树组件的示例
2020/11/06 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python程序设计入门(5)类的使用简介
2014/06/16 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python 以16进制打印输出的方法
2018/07/09 Python
Python 字符串与数字输出方法
2018/07/16 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
奢华时尚的创新平台:Baltini
2020/10/03 全球购物
暑期社会实践感言
2014/02/25 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
读书月活动方案
2014/05/22 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers