8.9 本地资源上传到开发者服务器 uni.uploadFile(OBJECT)常用API【uni-app教程uniapp教程（黄菊华-跨平台开发系列教程）】

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

黄菊华老师

1433人浏览 · 2020-11-11 09:10:09

黄菊华老师 · 2020-11-11 09:10:09 发布

8.9 上传

uni.uploadFile(OBJECT)
将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考：https://ask.dcloud.net.cn/article/35547。
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
OBJECT 参数说明
在这里插入图片描述
注意：
 App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
 hello uni-app中的客服反馈，支持多图上传。uni-app插件市场中也有多个封装的组件。
 App平台选择和上传非图像、视频文件，参考https://ask.dcloud.net.cn/article/35547
 网络请求的超时时间可以统一在 manifest.json 中配置 networkTimeout。
files参数说明
files 参数是一个 file 对象的数组，file 对象的结构如下：
在这里插入图片描述
示例

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 对象的方法列表
在这里插入图片描述
示例

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();
            }
        });
    }
});