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

  1. 装置图片抉择插件
    react-native-syan-image-picker 或 react-native-image-crop-picker,0.6以上版本无需手动link,具体插件配置参考GitHub链接
  2. 本次需要有多选性能 选取应用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察看申请

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理