在 React 中上传图像时出现内部服务器错误答案

【问题标题】：When uploading images in React I get internal server error在 React 中上传图像时出现内部服务器错误
【发布时间】：2020-09-23 17:07:31
【问题描述】：

我尝试发送带有图片的帖子请求，但它抛出错误无法弄清楚为什么

const [image, setImage] = useState([]);

    const handleImage = (event) => {
        setImage(...Array(event.target.files[0]))
    }

const handleSubmit = (e) => {

        const fd = new FormData();
        fd.append('title', title);
        fd.append('prebuildImages', image);
  
        axios.post('/admin/prebuild', fd , {
            headers: {'Content-Type': 'multipart/form-data' }
        })
        .then(res => console.log(res))
    }

<input type="file" onChange={handleImage}/>

【问题讨论】：

在服务器端处理。它返回状态码 500。您应该检查 api '/admin/prebuild'
是的，必须以数组的形式发送。但我不知道该怎么做

标签： javascript html reactjs react-native react-redux

【解决方案1】：

我用import ImagePicker from 'react-native-image-picker';包选择或拍照，它应该作为 FormData 发送到服务器：

function selectPhotoTapped() {
const options = {
  quality: 1.0,
  maxWidth: 500,
  maxHeight: 500,
  storageOptions: {
    skipBackup: true,
  },
};

ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
  } else if (response.error) {
  } else if (response.customButton) {
    // console.log('User tapped custom button: ', response.customButton);
  } else {
    const localTime = new Date().getTime();

    const data = new FormData();
    data.append('fileName', localTime + '.jpg');
    data.append('file', {
      name: localTime + '.jpg',
      uri: response.uri,
      type: response.type,
    });
    // call endpoint to send dataform
  }
});

}

【讨论】：