1. uni.uploadFile(OBJECT)

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

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

推荐开发者使用更好的APIuniCloud.uploadFile,uniCloud提供了免费CDN和更好的易用性,包括安全的cdn直传。详见:概述 | uni-app官网

OBJECT 参数说明

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

注意

  • App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
  • hello uni-app中的客服反馈,支持多图上传。uni-app插件市场中也有多个封装的组件。
  • App平台选择和上传非图像、视频文件,参考uni-app 选择和上传非图像、视频文件 - DCloud问答
  • 网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout
  • 支付宝小程序开发工具上传文件返回的http状态码为字符串形式,支付宝小程序真机返回的状态码为数字形式

files参数说明

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

参数名类型必填说明
nameStringmultipart 提交时,表单的项目名,默认为 file
fileFile要上传的文件对象,仅H5(2.6.15+)支持
uriString文件的本地地址

Tip:

  • 如果 name 不填或填的值相同,可能导致服务端读取文件时只能读取到一个文件。

success 返回参数说明

参数类型说明
dataString开发者服务器返回的数据
statusCodeNumber开发者服务器返回的 HTTP 状态码

示例

uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        uni.uploadFile({
            url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
            }
        });
    }
});

返回值

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

var uploadTask = uni.uploadFile({
    url: 'https://www.example.com/upload', //仅为示例,并非真实接口地址。
    complete: ()=> {}
});
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

示例

uni.chooseImage({
    success: (chooseImageRes) => {
        const tempFilePaths = chooseImageRes.tempFilePaths;
        const uploadTask = uni.uploadFile({
            url: 'https://www.example.com/upload', //仅为示例,非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'
            },
            success: (uploadFileRes) => {
                console.log(uploadFileRes.data);
            }
        });

        uploadTask.onProgressUpdate((res) => {
            console.log('上传进度' + res.progress);
            console.log('已经上传的数据长度' + res.totalBytesSent);
            console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

            // 测试条件,取消上传任务。
            if (res.progress > 50) {
                uploadTask.abort();
            }
        });
    }
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐