react-native - 如何在 react-native iOS 中上传文件？

Question

在尝试上传文件时，我在 iOS 上遇到了问题，该代码在 android 上运行良好。经过一番谷歌搜索，我发现这是 react-native iOS 中的一个已知问题，并且已提交错误报告。这就是问题。我想知道是否有任何其他方式可以在 iOS 上上传文件。下面是我正在使用的代码片段。如果有什么可以做的，请告诉我。

const resp = await fetch(uploadUrl, {
    method: 'POST',
    headers: {
        'content-type': 'multipart/form-data',
    },
    body: file, // file is File type
});

标签： react-native

Answer 1

你可以像下面的代码片段

function uploadProfileImage(image, token) {
  const url = ServiceUrls.UPLOAD_PROFILE_IMAGE

  return uploadResourceWithPost({
    url,
    authToken: token,
    formData: createFormData(image),
  })
}


const createFormData = (data) => {
  const form = new FormData()
  form.append('file', {
    uri: Platform.OS === 'android' ? data.uri : data.uri.replace('file://', ''),
    type: 'image/jpeg',
    name: 'image.jpg',
  })
  return form
}

const uploadResourceWithPost = ({ url, authToken, formData }) => {
  return handleResponse(axios.post(url, formData, defaultUploadOptions(authToken)))
}

const defaultUploadOptions = (authToken) => ({
  timeout,
  headers: {
    'X-Auth-Token': authToken,
    'Content-Type': 'multipart/form-data',
  },
})


const handleResponse = (responsePromise) => {
  return NetInfo.fetch().then((state) => {
    if (state.isConnected) {
      return responsePromise
        .then((response) => {
          return ResponseService.parseSuccess(response)
        })
        .catch((error) => {
          return ResponseService.parseError(error)
        })
    }

    return {
      ok: false,
      message: 'Check your network connection and try again.',
      status: 408,
    }
  })
}

const parseSuccess = ({ data, headers }) => ({ ...data, headers, ok: true })

const parseError = ({ response }) => {
  let message = 'Check your network connection and try again.'
  let status = 408
  if (response && response.data) {
    const { data } = response
    message = data.message
    status = data.code
  }

  return { status, message }
}