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

    技术2025-10-30  9

    小程序: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 }); 参数 currenturls:需要预览的图片链接列表indicator:图片指示器样式(“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器 )loop:是否可循环预览longPressActions: 长按图片显示操作菜单,如不填默认为保存相册 itemListitemColorsuccess index 用户长按图片的索引值 | tapIndex 用户点击按钮列表的索引值 failcomplete successfailcomplete

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

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

    uni.compressImage(object):压缩图片接口,可选压缩质量

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

    上传
    上传:uni.uploadFile(object)

    参数

    url

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

    name:multipart 提交时,表单的项目名,默认为 filefile:要上传的文件对象 | 仅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 | 已经上传的数据长度,单位 BytestotalBytesExpectedToSend:number | 预期需要上传的数据总长度,单位 Bytes

    仅微信小程序平台支持

    onHeadersReceived:监听 HTTP Response Header 事件 | 会比请求完成事件更早offHeadersReceived:取消监听 HTTP Response Header 事件offProgressUpdate:取消监听上传进度变化事件
    下载
    下载:uni.downloadFile(object)

    参数

    urlheadersuccess tempFilePath:临时文件路径,下载后的文件会存储到一个临时文件statusCode failcomplete

    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 | 已经下载的数据长度,单位 BytestotalBytesExpectedToWrite:number | 预期需要下载的数据总长度,单位 Bytes

    仅微信小程序平台支持

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

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