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

微信(小程序)  /  管理员 发布于 3年前   475

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

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

您可能感兴趣的文章:

• 微信小程序HTTP请求从0到1封装
• 微信小程序HTTP接口请求封装代码实例
• 微信小程序表单验证插件WxValidate的二次封装功能（终极版）
• 微信小程序class封装http代码实例
• 基于Taro的微信小程序模板消息-获取formId功能模块封装实践
• 微信小程序中如何使用flyio封装网络请求
• 小程序封装路由文件和路由方法(5种全解析)
• 微信小程序-API接口安全详解
• 小程序云函数调用API接口的方法
• 微信小程序通过api接口将json数据展现到小程序示例