react-native - React Native 与 Asp.net Core 照片上传

Question

我想用 React Native 上传照片。我对 Postman 的 API 尝试得到了肯定的结果。但是 React Native 没有成功。

反应原生功能

  uploadPhoto = async response => {
    const data = new FormData();
    data.append("image", {
      uri: response.uri,
      type: response.type,
      name: response.fileName,
      length:response.fileSize
    });
    const config={
      headers:{
        'Content-type':'multipart/form-data'
      }
    }
    axios
    .post('https://localhost:44337/api/values',JSON.stringify(data),config)
    .then(response=>{
      console.log(response);
    })
    .catch(error=>{console.log(error);})

  };

Asp.net Core 端

 [HttpPost]
 public IActionResult Post([FromForm]PhotoModel bookData)
 {
             //installation codes
            return Ok();
 }

模型

  public class PhotoModel
    {
        public IFormFile image { get; set; }
    }

结果：网络错误

标签： react-nativeasp.net-coreaxios

Answer 1

您可以尝试反应本机代码。希望对你有所帮助。

export const uploadImages = async (formData) => {
    try {
        let response = await axios({
            url: urlUploadImages,
            method: 'POST',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'POST, GET, PUT, OPTIONS, DELETE',
                'Access-Control-Allow-Headers': 'Access-Control-Allow-Methods, Access-Control-Allow-Origin, Origin, Accept, Content-Type',
                'Accept': 'application/x-www-form-urlencoded',
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Bearer ' + global.TOKEN || 'Bearer ' + await AsyncStorage.getItem("@loggedInUserID:token"),
            },
            data: formData,
        });

        console.log('uploadImages API response', response)

        if (response.status === 401) {
            return global.UNAUTHORIZE;
        } else {
            // let json = await response;
            if (response.status === 200) {
                return response.data;
            } else {
                return global.FAIL;
            }
        }
    } catch (error) {
        console.log('Upload Failed', error);
    }
};