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

作者:剑圣_LLX 时间:2024-04-25 13:13:31 

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

来源:https://www.cnblogs.com/LLX8/p/12106106.html

标签:小程序,封装,图片,上传,api
0
投稿

猜你喜欢

  • Python中Tkinter Scrollbar滚动条(窗口滑动条)

    2021-11-12 00:22:59
  • Python xlwings插入Excel图片的实现方法

    2023-11-23 05:53:18
  • mysql简单实现查询结果添加序列号的方法

    2024-01-26 11:33:56
  • 用JS实现轮播图效果(二)

    2024-06-05 09:11:49
  • 微信小程序点餐系统开发常见问题汇总

    2024-04-10 10:52:00
  • win10系统下python3安装及pip换源和使用教程

    2023-07-10 19:48:40
  • javascript过滤数组重复元素的实现方法

    2023-09-08 00:41:21
  • python装饰器原理与用法深入详解

    2021-01-13 09:17:19
  • JavaScript实现计算圆周率到小数点后100位的方法示例

    2024-02-27 02:38:58
  • Python 作为小程序后端的三种实现方法(推荐)

    2023-03-30 09:26:05
  • CentOS7.6安装MYSQL8.0的步骤详解

    2024-01-17 02:48:28
  • NaviCat连接时提示"不支持远程连接的MySql数据库"解决方法

    2024-01-24 17:03:54
  • Python中self用法实例详解

    2022-12-18 08:27:48
  • python基本语法练习实例

    2021-02-25 06:50:07
  • python 列表元素左右循环移动 的多种解决方案

    2023-06-15 06:21:45
  • Python读写Redis数据库操作示例

    2024-01-13 02:09:05
  • MySQL命令无法输入中文问题的解决方式

    2024-01-15 19:29:54
  • vue项目无法删除的问题及解决

    2024-05-02 17:08:36
  • python 如何实现跳过异常继续执行

    2022-07-03 11:34:02
  • Python socket连接中的粘包、精确传输问题实例分析

    2023-12-21 23:42:48
  • asp之家 网络编程 m.aspxhome.com