小程序：uni学习第六弹之图片 | 上传下载

小程序：uni学习第六弹之图片 | 上传下载

图片

• uni.chooseImage(object)：从本地相册选择图片或使用相机拍照

  • demo

  	uni.chooseImage({
  		   count: 3, // 默认9
  		    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  		    sourceType: ['album'], // 从相册选择
  		    success: res => {
  				// console.log(res)
  				this.imgArr = res.tempFilePaths;
  		    }
  		});
  

  • 参数

    • count：number | 最多可以选择的图片张数，默认9张

    • sizeType：string[]

      • original 原图 | compressed 压缩图，默认二者都有

    • sourceType：string[]

      • album 从相册选图 | camera 使用相机，默认二者都有
      • 只使用一个选项, 则单独设置某项即可

    • success：成功则返回图片的本地文件路径列表 tempFilePaths

    • fail：接口调用失败的回调函数 小程序、App

    • complete：接口调用结束的回调函数（调用成功、失败都会执行）

• uni.previewImage(object)：预览图片

  • demo

  	uni.previewImage({
  		current: item,  // item 当前图片路径
  		urls: this.imgArr,  // 图片列表
  		loop: true
  	});
  

  • 参数
    • current
    • urls：需要预览的图片链接列表
    • indicator：图片指示器样式（“default” - 底部圆点指示器； “number” - 顶部数字指示器； “none” - 不显示指示器 ）
    • loop：是否可循环预览
    • longPressActions： 长按图片显示操作菜单，如不填默认为保存相册
      • itemList
      • itemColor
      • success
        • index 用户长按图片的索引值 | tapIndex 用户点击按钮列表的索引值
      • fail
      • complete
    • success
    • fail
    • complete

• uni.getImageInfo(object)：获取图片信息

• uni.saveImageToPhotosAlbum(object)：保存图片到系统相册

• uni.compressImage(object)：压缩图片接口，可选压缩质量

• wx.chooseMessageFile(object)：从微信聊天会话中选择文件

上传

• 上传：uni.uploadFile(object)

  • 参数

    • url

    • files：需要上传的文件列表 | 使用 files 时，filePath 和 name 不生效

      • name：multipart 提交时，表单的项目名，默认为 file
      • file：要上传的文件对象 | 仅H5（2.6.15+）支持
      • uri：文件的本地地址

    • fileType：文件类型，image/video/audio | 仅支付宝小程序，且必填。

    • file：要上传的文件对象 | 仅H5（2.6.15+）支持

    • filePath：要上传文件资源的路径

    • name：文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

    • header

    • formData

    • success： 返回参数 data | statusCode

    • fail

    • complete

  • uploadTask 对象

    • 创建

    	- uploadTask 对象，需要至少传入 success / fail / complete 参数中的一个
    	var uploadTask = uni.uploadFile({
    	    url: 'https://www.example.com/upload', //仅为示例，并非真实接口地址。
    	    complete: ()=> {}
    	});
    	uploadTask.abort();
    

    • 方法

      • abort：中断上传任务

      • onProgressUpdate：监听上传进度变化

        • progress：number | 上传进度百分比
        • totalBytesSent：number | 已经上传的数据长度，单位 Bytes
        • totalBytesExpectedToSend：number | 预期需要上传的数据总长度，单位 Bytes

      • 仅微信小程序平台支持

        • onHeadersReceived：监听 HTTP Response Header 事件 | 会比请求完成事件更早
        • offHeadersReceived：取消监听 HTTP Response Header 事件
        • offProgressUpdate：取消监听上传进度变化事件

下载

• 下载：uni.downloadFile(object)

  • 参数

    • url
    • header
    • success
      • tempFilePath：临时文件路径，下载后的文件会存储到一个临时文件
      • statusCode
    • fail
    • complete

  • downloadTask

    • 创建

    	- downloadTask对象，需要至少传入 success / fail / complete 参数中的一个
    	var downloadTask = uni.downloadFile({
    	    url: 'https://www.example.com/file/test', //仅为示例，并非真实接口地址。
    	    complete: ()=> {}
    	});
    	downloadTask.abort();
    

    • 方法

      • abort：中断上传任务

      • onProgressUpdate：监听上传进度变化

        • progress：number | 上传进度百分比
        • totalBytesWritten：number | 已经下载的数据长度，单位 Bytes
        • totalBytesExpectedToWrite：number | 预期需要下载的数据总长度，单位 Bytes

      • 仅微信小程序平台支持

        • onHeadersReceived：监听 HTTP Response Header 事件 | 会比请求完成事件更早
        • offHeadersReceived：取消监听 HTTP Response Header 事件
        • offProgressUpdate：取消监听上传进度变化事件

  • 注

    • 文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到