QinJs 官网 | QinJs 官网

qin.uploadFile

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

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

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
url	String	是	开发者服务器 url
files	Array	是（files 和 filePath 选其一）	需要上传的文件列表。使用 files 时，filePath 和 name 不生效。	H5
file	File	否	要上传的文件对象。	仅 H5 支持
filePath	String	是（files 和 filePath 选其一）	要上传文件资源的路径。
name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer 。
timeout	Number	否	超时时间，单位 ms	H5、微信小程序、抖音小程序、快手小程序
formData	Object	否	HTTP 请求中其他额外的 form data
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

注意：

hello uni-app 中的客服反馈，支持多图上传。 uni-app 插件市场中也有多个封装的组件。
网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

files参数说明

files 参数是一个 file 对象的数组，file 对象的结构如下：

参数名	类型	必填	说明
name	String	否	multipart 提交时，表单的项目名，默认为 file
file	File	否	要上传的文件对象，仅H5（2.6.15+）支持
uri	String	是	文件的本地地址

Tip:

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

success 返回参数说明

参数	类型	说明
data	String	开发者服务器返回的数据
statusCode	Number	开发者服务器返回的 HTTP 状态码

示例

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

qin.chooseImage({
  success: (chooseImageRes) => {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    qin.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 参数中的一个。例如：

const uploadTask = qin.uploadFile({
  //仅为示例，并非真实接口地址。
  url: 'https://www.example.com/upload',
  complete: ()=> {},
});
uploadTask.abort();

const uploadTask = qin.uploadFile({
  //仅为示例，并非真实接口地址。
  url: 'https://www.example.com/upload',
  complete: ()=> {},
});
uploadTask.abort();

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象：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

示例

qin.chooseImage({
  success: (chooseImageRes) => {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    const uploadTask = qin.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();
      }
    });
  }
});

qin.chooseImage({
  success: (chooseImageRes) => {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    const uploadTask = qin.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();
      }
    });
  }
});

qin.downloadFile

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

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。在 H5 上是跨域的，用户需要处理好跨域问题。

OBJECT 参数说明

参数名	类型	必填	说明	平台差异说明
url	String	是	下载资源的 url
header	Object	否	HTTP 请求 Header, header 中不能设置 Referer。
timeout	Number	否	超时时间，单位 ms	H5 、微信小程序、抖音小程序、快手小程序
filePath	string	否	指定文件下载后存储的路径 (本地路径)	小程序端支持（微信IOS小程序保存到相册需要添加此字段才可以正常保存）
success	Function	否	下载成功后以 tempFilePath 的形式传给页面， `res = {tempFilePath: '文件的临时路径'}`
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

success 返回参数说明

参数	类型	说明	平台差异说明
tempFilePath	String	临时文件路径，下载后的文件会存储到一个临时文件	微信小程序、抖音小程序
statusCode	Number	开发者服务器返回的 HTTP 状态码	微信小程序、抖音小程序
apFilePath	String	下载文件保存的路径（本地临时文件）。入参未指定 filePath 的情况下可用	支付宝小程序
filePath	String	用户文件路径 (本地路径)。传入 filePath 时会返回，跟传入的 filePath 一致	微信小程序、抖音小程序
fileContent	Buffer	文件内容

注意

网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

示例

qin.downloadFile({
  //仅为示例，并非真实的资源
  url: 'https://www.example.com/file/test',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  },
});

qin.downloadFile({
  //仅为示例，并非真实的资源
  url: 'https://www.example.com/file/test',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  },
});

返回值

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

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

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

如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象： 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

示例

const downloadTask = qin.downloadFile({
  //仅为示例，并非真实的资源
  url: 'http://www.example.com/file/test',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  },
});

downloadTask.onProgressUpdate((res) => {
  console.log('下载进度' + res.progress);
  console.log('已经下载的数据长度' + res.totalBytesWritten);
  console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

  // 满足测试条件，取消下载任务。
  if (res.progress > 50) {
    downloadTask.abort();
  }
});

const downloadTask = qin.downloadFile({
  //仅为示例，并非真实的资源
  url: 'http://www.example.com/file/test',
  success: (res) => {
    if (res.statusCode === 200) {
      console.log('下载成功');
    }
  },
});

downloadTask.onProgressUpdate((res) => {
  console.log('下载进度' + res.progress);
  console.log('已经下载的数据长度' + res.totalBytesWritten);
  console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);

  // 满足测试条件，取消下载任务。
  if (res.progress > 50) {
    downloadTask.abort();
  }
});

qin.uploadFile ​

qin.downloadFile ​

qin.uploadFile

qin.downloadFile