微信小程序封装多张图片上传api代码实例

这篇文章主要介绍了微信小程序封装多张图片上传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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 基于Taro的微信小程序模板消息-获取formId功能模块封装实践

    前言 在微信小程序中,小程序提供了一种能力-模板消息,官方文档是这样描述的:"基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验." 看图说话: 下发模板消息效果图 这无疑又给小程序提供了与用户进行通知.反馈的新能力,但是小程序为了防止模板消息对用户造成信息轰炸,影响用户体验,也设置了一些规矩: 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个

  • 微信小程序HTTP接口请求封装代码实例

    1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回

  • 微信小程序HTTP请求从0到1封装

    前言 作为一个前端开发者,从最开始的js.jQuery一把梭,后来的vue.react.angular等MVVM.MVC框架,我们在开发工程中都离不开HTTP库的使用. HTTP库 1.jQuery的$.ajax 调用了XMLHttpRequest对象,封装在相关函数在配置项中,一旦传入了必需选项,则直接调用相应的send()方法进行数据的请求 2.Axios 基于Promise的请求库,通过判断XMLHTTPRequest对象存在与否,来支持客户端和node服务端发送请求,封装的很不错的HTT

  • 小程序云函数调用API接口的方法

    本文实例为大家分享了小程序云函数调用API接口的具体代码,供大家参考,具体内容如下 以下例子是调用小程序官方的API,如何调用API来进行对内容的安全检测: 第一步:新建一个文件名为msgCheck的Node.js的云函数,安装相关依赖(wx-server-sdk.got)上传并部署,在该目录下的index.js文件编辑代码如下: // 云函数入口文件 const cloud = require('wx-server-sdk') const got =require('got') let app

  • 微信小程序-API接口安全详解

    一.接口安全的必要性 最近我们公司的小程序要上线了,但是小程序端是外包负责的,我们负责提供后端接口.这就可能会造成接口安全问题.一些别有用心的人可以通过抓包或者其他方式即可获得到后台接口信息,如果不做权限校验,他们就可以随意调用后台接口,进行数据的篡改和服务器的攻击,会对一个企业造成很严重的影响. 因此,为了防止恶意调用,后台接口的防护和权限校验非常重要. 虽然小程序有HTTPs和微信保驾护航,但是还是要加强安全意识,对后端接口进行安全防护和权限校验. 二.小程序接口防护 小程序的登录过程: 小

  • 微信小程序通过api接口将json数据展现到小程序示例

    实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 wx.request({ url: '******',

  • 小程序封装路由文件和路由方法(5种全解析)

    小程序5种路由方法使用场景,封装路由文件和路由方法,提升小程序体验和开发效率 明确要解决的问题 每次使用路由时,总是粘贴复制路径,这样在路径有修改时,需要修改所有用到该路径的地方,维护成本高 路由跳转时拼接参数让人头大,业务复杂时要拼接十几个参数 路由返回,只会返回一层,不能直接返回到目标页面,因为不知道目标页面是否在路由栈中,也不知道在第几层 这些问题都可以通过封装路由文件和路由方法解决,提供开发效率,减少BUG,省下来的时间可以多陪陪女朋友 封装路由文件,对路由进行统一管理 在根目录创建ro

  • 微信小程序表单验证插件WxValidate的二次封装功能(终极版)

    微信小程序表单验证前面的两篇文章做的效果总感觉都有点不太友好,第一篇里的效果是将错误信息通过对话框形式弹出来,这种形式在web形式下早已经淘汰了:第二篇是一次性全部显示所有的错误,然后3秒后自动消失, 这种在极端情况下也不太好,例如我例子里的一页的表单个数非常多的情况下,可能后面的还没看到就消失了.所以最近又重新做了一版,最终版的效果如下图:错误信息一次性全部显示,可以通过点击信息框让其消失,将自动消失时间设置的稍微长点,例如10秒,这样就能比较好的兼顾效果和使用上的便捷. 先讲讲最终版与前面2

  • 微信小程序class封装http代码实例

    这篇文章主要介绍了微信小程序class封装http,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 config.js var config = { base_api_url:"https://douban.uieee.com/v2/" } export {config} utils/http.js import {config} from "../config"; class HTTP{ request(

  • 微信小程序中如何使用flyio封装网络请求

    Flyio简介 Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一.标准的Promise API.不仅如此,Fly.js还支持请求/响应拦截器.自动转化JSON.请求转发等功能,详情请参考:https://github.com/wendux/fly . 下面我们看看在微信小程序.mpvue中和中如何使用fly. Flyio 官方地址 文档 github地址 Flyio的一些特点 fly.js 是一个基于 pr

随机推荐