> 文章列表 > Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】

Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】

Taro React组件开发(8) —— RuiUploadImages 多图片上传组件【Promise.all 实现】

1. 需求分析

  1. 使用 Taro.chooseImage 实现图片的选择;
  2. 使用 Taro.uploadFile 实现图片的上传
  3. 由于 Taro.uploadFile API 的 filePath 只能是一张图片的路径,因此上边两个 API 只能实现单图图片上传。

2. 上传图片实现

  1. 组装完整的上传接口地址【${ server_env_url }${ config.default[data.url] }】;
  2. 获取上传图片的图片地址【data.file】;
  3. 获取上传图片的请求头部【api.getHeader(“multipart/form-data”, data)】;
  4. 上传成功,返回上传后的地址。
  // 文件上传uploadFileImage (data = {}) {data = {url: \'uploadSingleUrl\',...data}let url = `${ server_env_url }${ config.default[data.url] }`;return new Promise((resolve, reject) => {Taro.uploadFile({url,filePath: data.file,name: \'file\'