Multer 正在抓取图像,但它没有将我的文件保存在正确的目录中
Multer is grabbing images but it is not saving my files in the correct directory
我有一个快速服务器。当用户对配置文件发出 post 请求时。他们提交个人资料照片。我正在尝试使用 multer 获取正在发送的 photo/image 并将其存储在后端目录的文件夹中。
我设置了 multer,但由于某种原因它没有保存任何我希望它保存在本地以便我可以检索的照片。我该如何解决这个问题。有没有人知道如何解决这个问题。
控制器:
const Profile = require("../../models/UserModels/Profiles.js")
const User = require('../../models/UserModels/Users.js')
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '../../client/images/profile/')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})
const upload = multer({ storage: storage })
...
post:(req, res) => {
console.log(req.body)
console.log(req.files)
upload.single(req.files.profile_pic.name) <----------------
let body = req.body
Profile.create({
profile_pic: req.files.profile_pic.name,
f_name: body.f_name,
l_name: body.l_name,
bio: body.bio,
location: body.location,
sm_facebook: body.sm_facebook,
sm_instagram: body.sm_instagram,
sm_twitter: body.sm_twitter,
sm_website: body.sm_website,
followers: body.followers,
following: body.following,
photos: body.photos,
downloads: body.downloads,
edits: body.edits,
userId: body.userId
})
.then((data) => {
res.send(data).status(200)
})
.catch((err) => {
console.error(err)
res.send(err).status(400)
})
},
这是此后端的目录:
------------更新----------------
这是来自前端的 react axios 请求:
function createProfile(userId){
let data = new FormData()
data.append('f_name', firstName)
data.append('l_name', lastName)
data.append('bio', bio)
data.append('location', location)
data.append('sm_facebook', facebook)
data.append('sm_instagram', instagram)
data.append('sm_twitter', twitter)
data.append('sm_website', website)
data.append('followers', 0)
data.append('following', 0)
data.append('photos', 0)
data.append('edits', 0)
data.append('downloads', 0)
data.append('userId', userId)
data.append('profile_pic', profilePicture)
console.log(data)
axios({
method: "post",
url: "/api/profile/",
data: data,
headers: { "Content-Type": "multipart/form-data" },
})
.then((data) => {
return(<Navigate to='/' />)
})
.catch((err) => {
console.error(err)
})
}
您必须指定 multer 的存储路径,就像您位于项目的根文件夹中一样。
所以不要使用 '../../client/images/profile/'
作为存储路径,你应该使用:'./backend/client/images/profile'
.
您的代码应如下所示:
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './backend/client/images/profile')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})
我有一个快速服务器。当用户对配置文件发出 post 请求时。他们提交个人资料照片。我正在尝试使用 multer 获取正在发送的 photo/image 并将其存储在后端目录的文件夹中。
我设置了 multer,但由于某种原因它没有保存任何我希望它保存在本地以便我可以检索的照片。我该如何解决这个问题。有没有人知道如何解决这个问题。
控制器:
const Profile = require("../../models/UserModels/Profiles.js")
const User = require('../../models/UserModels/Users.js')
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, '../../client/images/profile/')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})
const upload = multer({ storage: storage })
...
post:(req, res) => {
console.log(req.body)
console.log(req.files)
upload.single(req.files.profile_pic.name) <----------------
let body = req.body
Profile.create({
profile_pic: req.files.profile_pic.name,
f_name: body.f_name,
l_name: body.l_name,
bio: body.bio,
location: body.location,
sm_facebook: body.sm_facebook,
sm_instagram: body.sm_instagram,
sm_twitter: body.sm_twitter,
sm_website: body.sm_website,
followers: body.followers,
following: body.following,
photos: body.photos,
downloads: body.downloads,
edits: body.edits,
userId: body.userId
})
.then((data) => {
res.send(data).status(200)
})
.catch((err) => {
console.error(err)
res.send(err).status(400)
})
},
这是此后端的目录:
------------更新----------------
这是来自前端的 react axios 请求:
function createProfile(userId){
let data = new FormData()
data.append('f_name', firstName)
data.append('l_name', lastName)
data.append('bio', bio)
data.append('location', location)
data.append('sm_facebook', facebook)
data.append('sm_instagram', instagram)
data.append('sm_twitter', twitter)
data.append('sm_website', website)
data.append('followers', 0)
data.append('following', 0)
data.append('photos', 0)
data.append('edits', 0)
data.append('downloads', 0)
data.append('userId', userId)
data.append('profile_pic', profilePicture)
console.log(data)
axios({
method: "post",
url: "/api/profile/",
data: data,
headers: { "Content-Type": "multipart/form-data" },
})
.then((data) => {
return(<Navigate to='/' />)
})
.catch((err) => {
console.error(err)
})
}
您必须指定 multer 的存储路径,就像您位于项目的根文件夹中一样。
所以不要使用 '../../client/images/profile/'
作为存储路径,你应该使用:'./backend/client/images/profile'
.
您的代码应如下所示:
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './backend/client/images/profile')
},
filename: function (req, file, cb) {
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix)
}
})