代码之家  ›  专栏  ›  技术社区  ›  Ahsan Sohail

React Native Fetch给出错误“网络请求失败”

  •  0
  • Ahsan Sohail  · 技术社区  · 7 年前

    我有以下代码用于创建带有图像和一些body参数的事件。当我在没有图像的情况下使用它时,它工作得很好 react-native-image-crop-picker 用于选择图像。从react native发布数据时出现“网络请求失败”错误。请求从未到达我的后端,因为那里没有日志。邮递员的工作很好。

    const { name, date, description, location, uri, mime, time } = this.state;
    
        const formData = new FormData();
        formData.append('name', name)
        formData.append('date', date)
        formData.append('description', description)
        formData.append('location', location)
        formData.append('time', time)
    
        formData.append('image',{
          uri:uri,
          mime:'image/jpeg',
          name:`image${moment()}`
        })
    
    
        alert(JSON.stringify(formData));
        const config = {
              method: 'POST',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
              },
              body: formData,
          };
    
        fetch(`http://${Config.apihost}:${Config.port}/events`,config).then((res) => res.json())
          .then((res) => {
            this.setState({ modalVisible: false, name:'', date: moment().format('YYYY-MM-DD'), description:'', Location: 'AlHedaya Masjid' })
            this.props.addEvent(res.message);
    
          // this.props.navigation.goBack();
          }).catch((err) => alert(err));
    

    我有另一个屏幕,其中包含不同数量的图片,如图库我上传多张图片到图库,请求与下面的代码工作良好。

     const data = new FormData();
            data.append('name', 'avatar');
            images.map((res, i) => {
              data.append('fileData[]', {
                uri: res.path,
                type: res.mime,
                name: `image${i}${moment()}`
              });
            })
            const config = {
              method: 'POST',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
              },
              body: data,
            };
            fetch(`http://${Config.apihost}:${Config.port}/events/${this.state.item.id}/photos`, config)
              .then((checkStatusAndGetJSONResponse) => checkStatusAndGetJSONResponse.json())
              .then((response) => {
    
                if (response.status && response.message.length > 0) {
                  var images = this.state.images;
                  response.message.map(file => {
                    images.push(`http:${Config.apihost}:${Config.port}/images/${file.id}`);
                  });
                  this.setState({ images });
                }
              }).catch((err) => { alert(err) });
    

    我错过什么了吗?

    1 回复  |  直到 7 年前
        1
  •  1
  •   ZubairHasan    7 年前

    在您编写的第一个代码段中 而不是 类型 .

    formData.append('image',{
          uri:uri,
          **mime:'image/jpeg**',
          name:`image${moment()}`
        })
    

    它应该像下面的代码片段一样

    formData.append('image',{
              uri:uri,
              type:'image/jpeg',
              name:`image${moment()}`
            })