React-Native 文件上传react-native-document-picker

react-native-document-picker

下载： npm install --save react-native-document-picker

引入：import DocumentPicker from 'react-native-document-picker';

使用：

基本使用：

/**
 * res：
 * {
 *   "fileCopyUri": "content://media/external/images/media/13",
 *   "name": "IMG_20210322_071512.jpg",
 *   "size": 199984,
 *   "type": "image/jpeg",
 *   "uri": "content://media/external/images/media/13"
 * }
 */
 
// 上传单个文件
try {
  const res = await DocumentPicker.pick({
    // 可以上传的文件的类型
    type: [
      // 任何类型的文件
      DocumentPicker.types.allFiles,
      DocumentPicker.types.images,
      DocumentPicker.types.plainText,
      DocumentPicker.types.audio,
      DocumentPicker.types.pdf,
      DocumentPicker.types.zip,
      DocumentPicker.types.csv,
      DocumentPicker.types.doc,
      DocumentPicker.types.docx,
      DocumentPicker.types.ppt,
      DocumentPicker.types.pptx,
      DocumentPicker.types.xls,
      DocumentPicker.types.xlsx,
    ],
  });
} catch (err) {
  // 在文件上传过程中出现错误
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}
/*————————————————————————————————————————*/
// 上传多个文件
try {
  const results = await DocumentPicker.pickMultiple({
    // 可以上传的文件的类型
    type: [
      // 任何类型的文件
      DocumentPicker.types.allFiles,
      DocumentPicker.types.images,
      DocumentPicker.types.plainText,
      DocumentPicker.types.audio,
      DocumentPicker.types.pdf,
      DocumentPicker.types.zip,
      DocumentPicker.types.csv,
      DocumentPicker.types.doc,
      DocumentPicker.types.docx,
      DocumentPicker.types.ppt,
      DocumentPicker.types.pptx,
      DocumentPicker.types.xls,
      DocumentPicker.types.xlsx,
    ],
  });

  for (const res of results) {
  }
} catch (err) {
  // 在文件上传过程中出现错误
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}

---

案例：

上传附件：

try {
  const res = await DocumentPicker.pick({
    type: [
      DocumentPicker.types.plainText,
      DocumentPicker.types.pdf,
      DocumentPicker.types.zip,
      DocumentPicker.types.doc,
      DocumentPicker.types.docx,
      DocumentPicker.types.ppt,
      DocumentPicker.types.pptx,
    ],
  });
  Toast.info('附件上传中', 2000, 'center');
  // type在接口中有写，只有六种类型
  let type = 0;
  if (res.type === 'zip') {
    type = 5;
  }
  // res.type === 'docx' ||
  // res.type === 'doc' ||
  // res.type === 'plainText' ||
  // res.type === 'pdf' ||
  // res.type === 'ppt' ||
  // res.type === 'pptx'
  else {
    type = 6;
  }

  let formData = new FormData();
  formData.append('file', res);
  formData.append('type', type);

  let res2 = await axios.post(
    '',
    formData,
    {
      headers: {
        'Authorization': `Bearer ${this.props.RootStore.userStore.allData.accessToken}`,
        'Content-Type': 'multipart/form-data'
      },
    },
  );

  if (res2.data.code === 0) {
    Toast.success('附件上传成功', 2000, 'center');
    
  } else {
    Toast.fail(res.data.msg, 2000, 'center');
  }
} catch (err) {
  if (DocumentPicker.isCancel(err)) {
    console.log('cancleErr', err);
  } else {
    console.log(err);
    throw err;
  }
}

上传图片

try {
  const res = await DocumentPicker.pick({
    type: [DocumentPicker.types.images],
  });

  let formData = new FormData();
  formData.append('file', res);
  formData.append('type', 1);
  const ans = await axios.post('', formData, {
    headers: {
      'Authorization': `Bearer ${this.props.RootStore.userStore.allData.accessToken}`,
      'Content-Type': 'multipart/form-data',
    },
  });
  if (ans.status === 200) {
  }
} catch (err) {
  // 在文件上传过程中出现错误
  if (DocumentPicker.isCancel(err)) {
    // User cancelled the picker, exit any dialogs or menus and move on
  } else {
    throw err;
  }
}