• uni.uploadFile(OBJECT)
  • uni.downloadFile(OBJECT)

    uni.uploadFile(OBJECT)

    将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-typemultipart/form-data。如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考:https://ask.dcloud.net.cn/article/35547。

    在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

    OBJECT 参数说明

    参数名类型必填说明平台差异说明
    urlString开发者服务器 url
    filesArray需要上传的文件列表。使用 files 时,filePath 和 name 不生效。5+App
    fileTypeString见平台差异说明文件类型,image/video/audio仅支付宝小程序,且必填。
    filePathString要上传文件资源的路径。
    nameString文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
    headerObjectHTTP 请求 Header, header 中不能设置 Referer。
    formDataObjectHTTP 请求中其他额外的 form data
    successFunction接口调用成功的回调函数
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

    注意

    • 5+App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
    • hello uni-app中的客服反馈,支持多图上传。uni-app插件市场中也有多个封装的组件。
    • App平台选择和上传非图像、视频文件,参考https://ask.dcloud.net.cn/article/35547
    • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。files参数说明

    files 参数是一个 file 对象的数组,file 对象的结构如下:

    参数名类型必填说明
    nameStringmultipart 提交时,表单的项目名,默认为 file
    uriString文件的本地地址

    Tip:

    • 如果 name 不填或填的值相同,可能导致服务端读取文件时只能读取到一个文件。success 返回参数说明
    参数类型说明
    dataString开发者服务器返回的数据
    statusCodeNumber开发者服务器返回的 HTTP 状态码

    示例

    1. uni.chooseImage({
    2. success: (chooseImageRes) => {
    3. const tempFilePaths = chooseImageRes.tempFilePaths;
    4. uni.uploadFile({
    5. url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
    6. filePath: tempFilePaths[0],
    7. name: 'file',
    8. formData: {
    9. 'user': 'test'
    10. },
    11. success: (uploadFileRes) => {
    12. console.log(uploadFileRes.data);
    13. }
    14. });
    15. }
    16. });

    返回值

    如果希望返回一个 uploadTask 对象,需要至少传入 success / fail / complete 参数中的一个。例如:

    1. var uploadTask = uni.uploadFile({
    2. url: 'https://www.example.com/upload', //仅为示例,并非真实接口地址。
    3. complete: ()=> {}
    4. });
    5. uploadTask.abort();

    如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:Promise 封装

    通过 uploadTask,可监听上传进度变化事件,以及取消上传任务。

    uploadTask 对象的方法列表

    方法参数说明
    abort中断上传任务
    onProgressUpdatecallback监听上传进度变化
    onHeadersReceivedcallback监听 HTTP Response Header 事件。会比请求完成事件更早,仅微信小程序平台支持,规范详情
    offProgressUpdatecallback取消监听上传进度变化事件,仅微信小程序平台支持,规范详情
    offHeadersReceivedcallback取消监听 HTTP Response Header 事件,仅微信小程序平台支持,规范详情

    onProgressUpdate 返回参数说明

    参数类型说明
    progressNumber上传进度百分比
    totalBytesSentNumber已经上传的数据长度,单位 Bytes
    totalBytesExpectedToSendNumber预期需要上传的数据总长度,单位 Bytes

    示例

    1. uni.chooseImage({
    2. success: (chooseImageRes) => {
    3. const tempFilePaths = chooseImageRes.tempFilePaths;
    4. const uploadTask = uni.uploadFile({
    5. url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
    6. filePath: tempFilePaths[0],
    7. name: 'file',
    8. formData: {
    9. 'user': 'test'
    10. },
    11. success: (uploadFileRes) => {
    12. console.log(uploadFileRes.data);
    13. }
    14. });
    15. uploadTask.onProgressUpdate((res) => {
    16. console.log('上传进度' + res.progress);
    17. console.log('已经上传的数据长度' + res.totalBytesSent);
    18. console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
    19. // 测试条件,取消上传任务。
    20. if (res.progress > 50) {
    21. uploadTask.abort();
    22. }
    23. });
    24. }
    25. });

    uni.downloadFile(OBJECT)

    下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径。

    在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

    OBJECT 参数说明

    参数名类型必填说明
    urlString下载资源的 url
    headerObjectHTTP 请求 Header, header 中不能设置 Referer。
    successFunction下载成功后以 tempFilePath 的形式传给页面,res = {tempFilePath: '文件的临时路径'}
    failFunction接口调用失败的回调函数
    completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

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

    success 返回参数说明

    参数类型说明
    tempFilePathString临时文件路径,下载后的文件会存储到一个临时文件
    statusCodeNumber开发者服务器返回的 HTTP 状态码

    注意

    • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。示例
    1. uni.downloadFile({
    2. url: 'https://www.example.com/file/test', //仅为示例,并非真实的资源
    3. success: (res) => {
    4. if (res.statusCode === 200) {
    5. console.log('下载成功');
    6. }
    7. }
    8. });

    返回值

    如果希望返回一个 downloadTask 对象,需要至少传入 success / fail / complete 参数中的一个。例如:

    1. var downloadTask = uni.downloadFile({
    2. url: 'https://www.example.com/file/test', //仅为示例,并非真实接口地址。
    3. complete: ()=> {}
    4. });
    5. downloadTask.abort();

    如果没有传入 success / fail / complete 参数,则会返回封装后的 Promise 对象:Promise 封装

    通过 downloadTask,可监听下载进度变化事件,以及取消下载任务。

    downloadTask 对象的方法列表

    方法参数说明最低版本
    abort中断下载任务
    onProgressUpdatecallback监听下载进度变化
    onHeadersReceivedcallback监听 HTTP Response Header 事件,会比请求完成事件更早,仅微信小程序平台支持,规范详情
    offProgressUpdatecallback取消监听下载进度变化事件,仅微信小程序平台支持,规范详情
    offHeadersReceivedcallback取消监听 HTTP Response Header 事件,仅微信小程序平台支持,规范详情

    onProgressUpdate 返回参数说明

    参数类型说明
    progressNumber下载进度百分比
    totalBytesWrittenNumber已经下载的数据长度,单位 Bytes
    totalBytesExpectedToWriteNumber预期需要下载的数据总长度,单位 Bytes

    示例

    1. const downloadTask = uni.downloadFile({
    2. url: 'http://www.example.com/file/test', //仅为示例,并非真实的资源
    3. success: (res) => {
    4. if (res.statusCode === 200) {
    5. console.log('下载成功');
    6. }
    7. }
    8. });
    9. downloadTask.onProgressUpdate((res) => {
    10. console.log('下载进度' + res.progress);
    11. console.log('已经下载的数据长度' + res.totalBytesWritten);
    12. console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
    13. // 测试条件,取消下载任务。
    14. if (res.progress > 50) {
    15. downloadTask.abort();
    16. }
    17. });

    发现错误?想参与编辑?在 GitHub 上编辑此页面!