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/07/31