我有一个 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 中一样。