imgUpload

功能描述

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

依赖的模块

imageFilter(压缩图片模块) 注:如需上传压缩图,建议使用UIAlbumBrowser模块(从本地相册获取图片)

快速使用

  1. 使用流程:引入im_imgupload.js (如需显示上传进度条,则另外引入im_imgupload.css。进度条相关样式可参考示例html。)

初始化模块

var imglist = new ImgListUp();

方法:

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

参数:params [Ojbect]

  1. imglist:
  2. 描述:需要上传的图片数组
  3. 类型:数组
  4. 默认值:无(必传)
  5. service_url:
  6. 描述:上传图片的请求地址
  7. 类型:字符串
  8. 默认值:无(必传)
  9. height:
  10. 描述:压缩后图片的高度
  11. 类型:数字
  12. 默认值:1000
  13. progress:
  14. 描述:是否需要进度条
  15. 类型:布尔值
  16. 默认值:false
  17. isthumb:
  18. 描述:是否需要上传缩略图
  19. 类型:布尔值
  20. 默认值:true
  21. url_name:
  22. 描述:原图地址的字段名称
  23. 类型:字符串
  24. 默认值:'path'
  25. thumbpath_name:
  26. 描述:缩略图地址的字段名称
  27. 类型:字符串
  28. 默认值:'thumbPath'

callback(data):

  1. 回调函数
  2. data
  3. 类型:JSON对象
  4. 内部字段:
  5. 示例:
  6. [{
  7. url: '原图地址1',
  8. destPath: '缩略图地址1'
  9. },{
  10. url: '原图地址1',
  11. destPath: '缩略图地址1'
  12. }]

示例代码:

  1. var imglist_up = new ImgListUp();
  2. imglist_up.up({
  3. imglist: imglist,
  4. service_url: 'http://192.168.19.123:3000/upload',
  5. progress: true,
  6. },function(list){
  7. alert(JSON.stringify(list))
  8. })

特别说明

  1. 本模块示例页面采用了vue.js编写,并且本模块依赖于apicloud运行环境。