乐趣区

关于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 察看申请

退出移动版