我正在使用 React 为艺术作品集应用程序构建内容管理系统。客户端将 POST 到使用 Mongoose 插入 MongoDB 的 API。然后 API 向数据库查询新插入的图像，并将其返回给客户端。
这是我使用 Mongoose 连接到 MongoDB 的代码：
mongoose.connect('mongodb://localhost/test').then(() =>
console.log('connected to db')).catch(err => console.log(err))
mongoose.Promise = global.Promise
const db = mongoose.connection
db.on('error', console.error.bind(console, 'MongoDB connection error:'))
const Schema = mongoose.Schema;
const ImgSchema = new Schema({
img: { data: Buffer, contentType: String }
})
const Img = mongoose.model('Img', ImgSchema)
我正在使用 multer 和 fs 来处理图像文件。我的 POST 端点如下所示：
router.post('/', upload.single('image'), (req, res) => {
if (!req.file) {
res.send('no file')
} else {
const imgItem = new Img()
imgItem.img.data = fs.readFileSync(req.file.path)
imgItem.contentType = 'image/png'
imgItem
.save()
.then(data =>
Img.findById(data, (err, findImg) => {
console.log(findImg.img)
fs.writeFileSync('api/uploads/image.png', findImg.img.data)
res.sendFile(__dirname + '/uploads/image.png')
}))
}
})
我可以在文件结构中看到 writeFileSync 正在将图像写入磁盘。res.sendFile 抓取它并发送给客户端。
客户端代码如下所示：
handleSubmit = e => {
e.preventDefault()
const img = new FormData()
img.append('image', this.state.file, this.state.file.name)
axios
.post('http://localhost:8000/api/gallery', img, {
onUploadProgress: progressEvent => {
console.log(progressEvent.loaded / progressEvent.total)
}
})
.then(res => {
console.log('responsed')
console.log(res)
const returnedFile = new File([res.data], 'image.png', { type: 'image/png' })
const reader = new FileReader()
reader.onloadend = () => {
this.setState({ returnedFile, returned: reader.result })
}
reader.readAsDataURL(returnedFile)
})
.catch(err => console.log(err))
}
这确实成功地将返回的文件和 img 数据 url 置于状态。但是，在我的应用程序中，图像总是显示损坏。
下面是一些截图：
如何解决这个问题？
