imgUpload

功能描述

该组件主要集成了多张图片上传的功能，其中涉及到图片压缩，缩略图、原图上传等。 为了提高效率，压缩完图片后，同时上传服务器，无需等待前一张上传完毕。 （注：libs组件下包含了一张示例图片）

依赖的组件

imageFilter（压缩图片组件） 注：如需上传压缩图，建议使用UIAlbumBrowser组件（从本地相册获取图片）

快速使用

使用流程：引入im_imgupload.js。 （如需显示上传进度条，则另外引入im_imgupload.css。进度条相关样式可参考示例html。）

初始化组件

var imglist = new ImgListUp();

方法：

up(params,callback(data)) //上传图片

参数：params [Ojbect]

  imglist:
    描述：需要上传的图片数组
    类型：数组
    默认值：无（必传）

  service_url:
    描述：上传图片的请求地址
    类型：字符串
    默认值：无（必传）

  height:
    描述：压缩后图片的高度
    类型：数字
    默认值：1000

  progress:
    描述：是否需要进度条
    类型：布尔值
    默认值：false

  isthumb:
    描述：是否需要上传缩略图
    类型：布尔值
    默认值：true

  url_name:
    描述：原图地址的字段名称
    类型：字符串
    默认值：'path'

  thumbpath_name:
    描述：缩略图地址的字段名称
    类型：字符串
    默认值：'thumbPath'

callback(data):

  回调函数

  data：
    类型：JSON对象

  内部字段:

    示例：

  [{
     url: '原图地址1',
     destPath: '缩略图地址1'
  },{
     url: '原图地址1',
     destPath: '缩略图地址1'
  }]

示例代码:

      var imglist_up = new ImgListUp();
      imglist_up.up({
          imglist: imglist,
          service_url: 'http://192.168.19.123:3000/upload',
          progress: true,
      },function(list){
          alert(JSON.stringify(list))
      })

特别说明

本组件示例页面采用了vue.js编写，并且本组件依赖于apicloud运行环境。
是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18