【发布时间】：2021-08-26 11:13:45
【问题描述】：
我正在尝试在我的项目中使用 multer 将图像作为文件上传，但我不知道为什么我在 req.files 上看到的控制台后端的 onCreate 请求：[]; （空数组）。
这里是我创建元素的地方：
const [imagesColors, setImagesColors] = useState([{image: [], color: ''}])
const createProduct = (e) => {
e.preventDefault ();
const data = new FormData()
data.append("name", name)
data.append("description", description)
data.append("processor", processor)
data.append("ram", ram)
data.append("storage", storage)
data.append("imagesColors", imagesColors)
data.append("price", price)
data.append("type", type)
console.log(data)
fetch ('http://localhost:5000/products/create', {
method: 'POST',
body: data
})...
const handleInputChangeColor = (e, index) => {
const { name, value } = e.target;
const list = [...imagesColors];
list[index][name] = value;
setImagesColors(list);
};
const handleInputChangeImage = (e, index) => {
const name = e.target.name;
const file = e.target.files;
const list = [...imagesColors];
list[index][name] = file;
setImagesColors(list);
};
return (
...
{imagesColors.map((x, i) => {
return (
<div className="box">
<label htmlFor="file" className="file--Input--Container">
<input
type="file"
id="file"
multiple
name="image"
className="file--Input"
filename="imageFile"
placeholder="Product Image"
onChange={e => handleInputChangeImage(e, i)}
/>
<div className="file--Label--Container">
<FaCloudUploadAlt className="upload--Icon"/> Upload Images
</div>
</label>
<select
onChange={e => handleInputChangeColor(e, i)}
value={x.color}
name="color"
defaultValue=""
>
<option selected value="">Color</option>
<option value='#4f5b66'>Space-gray</option>
<option value='#a7adba'>Silver</option>
<option value='#FFFFFF'>White</option>
<option value='#F63204'>Red</option>
<option value='#000000'>Black</option>
<option value='#0095CB'>Pacific-Blue</option>
</select>
<div className="btn-box">
{imagesColors.length !== 1 && <button onClick={() => handleRemoveClick(i)}>Remove</button>}
{imagesColors.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
</div>
</div>
);
})}
当我 console.log 状态 imagesColors 它返回：
这是在后端使用 multer 函数的 create 函数：
const imageStorage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "../../shpJS/frontend/src/styles/images")
},
filename: (req, file, callback) => {
callback(null, file.name)
}
})
const uploads = multer({storage: imageStorage})
router.post('/create', uploads.array("imagesColors"), async (req, res) => {
console.log(req, ' asd')
try {
const data = {
name: req.body.name,
description: req.body.description,
processor: req.body.processor,
ram: req.body.ram,
storage: req.body.storage,
imagesColors: req.files,
price: req.body.price,
type: req.body.type,
likes: req.body.likes
}
let product = await productService.create(data)
res.status(201).json(product)
} catch (error) {
res.status(500).json({error: error})
}
})
以及来自请求的控制台中的结果：
【问题讨论】：
-
看看 req.imagesColors 记录了什么。
-
@NithinKJoy [对象对象]。但是我该如何解决呢？
-
我在 2 天前用 multer 上传（文件和 json 数据一起）时遇到了同样的问题。所以我所做的是在前端将图像转换为 base64 并上传，然后在后端将 base64 转换为文件。你需要那个源代码吗？
-
@NithinKJoy 是的，你能提供吗？
标签： reactjs mongodb express multer mern