⽂件上传、下载uniapp——uploadFile、downloadFile
uni.app中中的上传、下载接⼝，分包为和。
uni.uploadFile(OBJECT)
定义
将本地资源上传到开发者服务器，客户端发起⼀个POST请求，其中content-type为multipart/form-data。
如页⾯通过等接⼝获取到⼀个本地资源的临时⽂件路径后，可通过此接⼝将本地资源上传到指定服务器。另外选择和上传⾮图像、视频⽂件参考：。
在各个⼩程序平台运⾏时，⽹络相关的 API 在使⽤前需要配置域名⽩名单。
推荐开发者上传到uniCloud，uniCloud提供了免费CDN和更好的易⽤性，包括安全的cdn直传。uniCloud的上传API：；封装的更完善的，⽂件选择、上传到uniCloud，⼀站式集成。
参数
url String是开发者服务器url
files Array是（files和filePath选
其⼀）需要上传的⽂件列表。使⽤ files 时，filePath 和 name 不⽣
效。
App、H5（ 2.6.15+）
fileType String见平台差异说明⽂件类型，image/video/audio仅⽀付宝⼩程序，且必填。file File否要上传的⽂件对象。仅H5（2.6.15+）⽀持
filePath String是（files和filePath选
其⼀）
要上传⽂件资源的路径。
name String是⽂件对应的 key , 开发者在服务器端通过这个 key 可以获取
到⽂件⼆进制内容
header Object否HTTP 请求 Header, header 中不能设置 Referer。
timeout Number否超时时间，单位 ms H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
formData Object否HTTP 请求中其他额外的 form data
success Function否接⼝调⽤成功的回调函数
fail Function否接⼝调⽤失败的回调函数
complete Function否接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
注：
App⽀持多⽂件上传，⼩程序只⽀持单⽂件上传，传多个⽂件需要反复调⽤本API。所以跨端的写法就是循环调⽤本API。
hello uni-app中的客服反馈，⽀持多图上传。中也有多个封装的组件。
App平台选择和上传⾮图像、视频⽂件，参考
⽹络请求的超时时间可以统⼀在manifest.json中配置。
⽀付宝⼩程序开发⼯具上传⽂件返回的http状态码为字符串形式，⽀付宝⼩程序真机返回的状态码为数字形式
files参数说明
name String否multipart 提交时，表单的项⽬名，默认为 file
file File否要上传的⽂件对象，仅H5（2.6.15+）⽀持
uri String是⽂件的本地地址
注：如果name不填或填的值相同，可能导致服务端读取⽂件时只能读取到⼀个⽂件。
返回值
data String开发者服务器返回的数据
statusCode Number开发者服务器返回的 HTTP 状态码
1 uni.chooseImage({
2 success: (chooseImageRes) => {
3 const tempFilePaths = pFilePaths;
4 uni.uploadFile({
5 url: 'ample/upload', //仅为⽰例，⾮真实的接⼝地址
6 filePath: tempFilePaths[0],
7 name: 'file',
8 formData: {
9 'user': 'test'
10 },h5平台源码下载
11 success: (uploadFileRes) => {
12 console.log(uploadFileRes.data);
13 }
14 });
15 }
16 });
监听上传进度
如果希望返回⼀个uploadTask对象，需要⾄少传⼊ success / fail / complete 参数中的⼀个。
如果没有传⼊ success / fail / complete 参数，则会返回封装后的 Promise 对象：。通过uploadTask，可监听上传进度变化事件，以及取消上传任务。
uploadTask 对象的⽅法列表
abort中断上传任务
onProgressUpdate callback监听上传进度变化
onHeadersReceived callback监听 HTTP Response Header 事件。会⽐请求完成事件更早，仅⼩程序平台⽀持，offProgressUpdate callback取消监听上传进度变化事件，仅⼩程序平台⽀持，
offHeadersReceived callback取消监听 HTTP Response Header 事件，仅⼩程序平台⽀持，
onProgressUpdate 返回参数说明
progress Number上传进度百分⽐
totalBytesSent Number已经上传的数据长度，单位 Bytes
totalBytesExpectedToSend Number预期需要上传的数据总长度，单位 Bytes
⽰例
1 uni.chooseImage({
2 success: (chooseImageRes) => {
3 const tempFilePaths = pFilePaths;
4 const uploadTask = uni.uploadFile({
5 url: 'ample/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 ProgressUpdate((res) => {
17 console.log('上传进度' + res.progress);
18 console.log('已经上传的数据长度' + alBytesSent);
19 console.log('预期需要上传的数据总长度' + alBytesExpectedToSend);
20
21// 测试条件，取消上传任务。
22if (res.progress > 50) {
23 uploadTask.abort();
24 }
25 });
26 }
27 });
uni.downloadFile(OBJECT)
下载⽂件资源到本地，客户端直接发起⼀个 HTTP GET 请求，返回⽂件的本地临时路径。
在各个⼩程序平台运⾏时，⽹络相关的 API 在使⽤前需要配置域名⽩名单。在h5上是跨域的，⽤户需要处理好跨域问题。
参数
url String是下载资源的 url
header Object否HTTP 请求 Header, header 中不能设置 Referer。
timeout Number否超时时间，单位 ms H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+) success Function否下载成功后以 tempFilePath 的形式传给页⾯，res =
{tempFilePath: '⽂件的临时路径'}
fail Function否接⼝调⽤失败的回调函数
complete Function否接⼝调⽤结束的回调函数（调⽤成功、失败都会执⾏）
filePath string否指定⽂件下载后存储的路径 (本地路径)⼩程序（IOS⼩程序保存到相册需要添加此字段
才可以正常保存）
⽂件的临时路径，在应⽤本次启动期间可以正常使⽤，如需持久保存，需在主动调⽤，才能在应⽤下次启动时访问得到。
返回
tempFilePath String临时⽂件路径，下载后的⽂件会存储到⼀个临时⽂件
statusCode Number开发者服务器返回的 HTTP 状态码
⽹络请求的超时时间可以统⼀在manifest.json中配置。
⽰例
1 uni.downloadFile({
2 url: 'ample/file/test', //仅为⽰例，并⾮真实的资源
3 success: (res) => {
4if (res.statusCode === 200) {
5 console.log('下载成功');
6 }
7 }
8 });
监听下载进度
如果希望返回⼀个downloadTask对象，需要⾄少传⼊ success / fail / complete 参数中的⼀个。
如果没有传⼊ success / fail / complete 参数，则会返回封装后的 Promise 对象：
通过downloadTask，可监听下载进度变化事件，以及取消下载任务。
downloadTask 对象的⽅法列表
abort中断下载任务* onProgressUpdate callback监听下载进度变化* onHeadersReceived callback监听 HTTP Response Header 事件，会⽐请求完成事件更早，仅⼩程序平台⽀持，offProgressUpdate callback取消监听下载进度变化事件，仅⼩程序平台⽀持，
offHeadersReceived callback取消监听 HTTP Response Header 事件，仅⼩程序平台⽀持，
onProgressUpdate 返回参数说明
progress Number下载进度百分⽐
totalBytesWritten Number已经下载的数据长度，单位 Bytes
totalBytesExpectedToWrite Number预期需要下载的数据总长度，单位 Bytes
⽰例
1 const downloadTask = uni.downloadFile({
2 url: 'ample/file/test', //仅为⽰例，并⾮真实的资源
3 success: (res) => {
4if (res.statusCode === 200) {
5 console.log('下载成功');
6 }
7 }
8 });
9
ProgressUpdate((res) => {
11 console.log('下载进度' + res.progress);
12 console.log('已经下载的数据长度' + alBytesWritten);
13 console.log('预期需要下载的数据总长度' + alBytesExpectedToWrite); 14
15// 测试条件，取消下载任务。
16if (res.progress > 50) {
17 downloadTask.abort();
18 }
参考⽹址
发表评论