我有一个 Nodejs 和 Express 服务器在本地运行,允许我上传图像,我在 Postman 上没有问题,但是当我尝试从 React Native 上传时,服务器获取请求数据,包括图像,但不上传到服务器!我在这里做错了什么,请看一看!

这是我的multer配置:

const storage = multer.diskStorage({ 
  destination: (req, file, cb) => { 
    cb(null, './server/uploads/'); 
  }, 
  filename: (req, file, cb) => { 
    cb(null, new Date().toISOString() + file.originalname); 
  } 
}) 
 
const fileFilter = (req, file, cb) => { 
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype === 'image') { 
    cb(null, true); 
  } else { 
    cb(null, false); 
  } 
} 
 
const upload = multer({  
  storage: storage,  
  limits: { 
    fileSize: 1024 * 1024 * 5 
  }, 
  fileFilter: fileFilter, 
}); 

这是我的路线电话:
route.post('/products', upload.single('image'), userAuthenticate, ProductController.createProduct); 

这是我的 Controller :
export const createProduct = async (req, res) => { 
  try { 
    console.log(req); 
 
    const { serial, name, description, cate_id, quantity, origin_price, sell_price, attributes } = req.body; 
    const newProduct = new Product({ serial, name, description, cate_id, quantity, origin_price, sell_price, attributes }); 
 
    newProduct._creator = req.user._id; 
 
    // upload image   
    console.log(req.file); 
    newProduct.image = fs.readFileSync(req.file.path); 
 
    let product = await newProduct.save(); 
    let user = req.user; 
    user._products.push(product); 
    await user.save(); 
    return res.status(201).json({ product }); 
  } catch (e) { 
    console.log(e.message); 
    return res.status(e.status || 404).json({ err: true, message: e.message }); 
  } 
} 

这是我来自 react native 的帖子请求:
const data = new FormData(); 
    data.append('serial', serial); 
    data.append('name', name); 
    data.append('description', description); 
    data.append('sell_price', [{ 'value': sell_price }]); 
    data.append('origin_price', origin_price); 
    data.append('quantity', quantity); 
    data.append('cate_id', cate_id); 
    data.append('attr', attr); 
    data.append('image', { 
      uri: image.uri, 
      type: image.type, 
      name: image.name 
    }); 
 
    let product = await axios({ 
      method: 'POST', 
      url: 'http://localhost:3000/api/products', 
      data: data, 
      headers: { 
        Accept: 'application/json', 
        'Content-Type': 'multipart/form-data',  
        'x-auth': token,  
      } 
    }) 

这是我在产品模型中的图像字段:
image: { 
    type: Buffer 
  }, 

请您参考如下方法:

最近我遇到了同样的问题,因为有一个 Unresolved 问题 See here在 react 原生。

但是我使用 rn-fetch-blob 找到了一个不错的解决方案

正如您在文档中看到的,您可以实现以下内容:

upload = async () => { 
    let ret = await RNFetchBlob.fetch( 
      'POST', 
      'http://localhost:3000/api/products', 
      { 
        'Content-Type': 'multipart/form-data', 
        'x-auth': token,  
      }, 
      [ 
        { 
          name: 'image', 
          filename: Date.now() + '.png', 
          type: 'image/png', 
          data: RNFetchBlob.wrap(image.uri), 
        }, 
      ], 
    ); 
    return ret; 
  }; 

如您所见,有一个数组,您可以在其中添加要上传的对象,就像在 FormData 中一样。


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!