关于react-native:reactnative-图片选取与上传

37次阅读

共计 942 个字符，预计需要花费 3 分钟才能阅读完成。

装置图片抉择插件
react-native-syan-image-picker 或 react-native-image-crop-picker，0.6 以上版本无需手动 link，具体插件配置参考 GitHub 链接
本次需要有多选性能选取应用 react-native-syan-image-picker
示例代码：

const [imageList, setImageList] = useState<UploadFileResItem[]>([]);
  // 插件配置参数 具体参见插件配置文档
  const options = {
    imageCount: 6,
    isCrop: false,
  };
  // 用户点击按钮选取图片
  const selectImage = () => {SyanImagePicker.asyncShowImagePicker(options)
      .then((photos: SelectedPhoto[]) => {
        // 解决选取后果 后果蕴含本地文件门路
        // 因为后端 不反对多文件同时上传应用 promise all 实现屡次上传申请
        const fetchList = photos.map((item) => upload(item));
        Promise.all(fetchList).then((res) => {setImageList((v) => [...v, ...res]);
        });
      })
      .catch((err) => {console.log('err', err);
        // 勾销抉择，err.message 为 "勾销"
      });
  };

  const upload = (data: SelectedPhoto) => {const formData = new FormData();
    formData.append('file', {
      uri: data.uri, // 本地文件门路
      type: 'multipart/form-data',
      name: 'xxxx.jpg', // 图片名称
    });
    return uploadImage(formData).then((res) => res.data);
  };

上传过程中不要应用 react-native-debugger 调试，react-native-debugger 会将 formdata 内容转换为 string，造成上传失败，倡议应用 flipper 察看申请

正文完