如何在multer文件上传时只发送文件名

Question

hi我正在使用express和multer从react前端接收后端的多个文件我的react查询代码如下：

fileChangeHandler = (event) => {
const data = new FormData()
let files = event.target.files
for (let file of files) {
data.append('file', file)
}
let url = db.url + "/adminendpoint/uploadfile"
axios.post(url, data, {
headers: {
'Content-Type': 'application/json',
Authorization:  this.props.token
},
}).then(r => console.log(r.names))
}

multer的后端数据如下：

uploadFile = async (req,res,next)=>{
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/images')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' +file.originalname )
}
})
let upload = multer({storage:storage}).array('file')
upload(req, res, function (err) {
if (err instanceof multer.MulterError) {
return res.json({err:err})
} else if (err) {
return res.json({err:err})
}
let names=[]
req.files.map(f=> names.push(f.filename))
console.log(names);
res.setHeader('Content-Type', 'application/json');
return res.json({names:names})
})

但奇怪的是，在后端，名称是一个数组，其中包含上传文件的名称，而在前端，响应是一个包含大量数据的对象。它有名称数组，但我想停止从后端发送这段数据，只发送文件名，响应格式应该只有json

config: {url: "http://localhost:8090/adminendpoint/uploadfile", method: "post", data: FormData, headers: {…}, transformRequest: Array(1), …}
data:
names: (2) ["1603483842517-2.png", "1603483842518-3.png"]
__proto__: Object
headers: {content-length: "54", content-type: "application/json; charset=utf-8"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: "OK"
__proto__: Object

​

Answer 1

一切就绪，只需使用Axios响应对象中的data属性即可。

console.log(r.data.names)

Axios返回的响应对象不仅仅包含响应主体。您将获得状态、标题、配置和请求。Axios文档中提供了完整的字段列表。

还有一些旁注。您不想在React中设置"Content Type"："application/json"，因为您使用的是FormData，它会在后台设置"Content Type"："multipart/form-data"。在Express中，如果您使用res.json()，则根本不必设置内容类型，因为该函数已经设置了内容类型