form表单上传
<body>
<!--enctype="multipart/form-data"多部份表单数据传输 后端无法直接处理该类型的数据 文件上传必须用这种格式-->
<form action="/api/user" method="post" enctype="multipart/form-data">
<div>
用户名: <input type="text" name="username">
密码: <input type="password" name="password">
年龄: <input type="text" name="age">
</div>
头像: <input type="file" name="avatar">
<input type="submit" value="提交">
</form>
</body>
安装multer,该中间件只能处理multipart/form-data类型的表单数据
npm i multer
----------------------------------------------------------
在接受表单数据的接口中使用
// 引入multer
const multer = require("multer")
// 创建保存文件的文件夹
const upload = multer({ dest: "public/uploads/" })
// 新建接口 先用multer处理文件数据, 再添加. avatar是前端文件表单的name. 接受后public/uploads/存的是二进制文件
router.post('/', upload.single("avatar"), userController.addUser)
// 接受多个图片 添加的就是req.files 是一个数组
router.post('/', upload.array("avatar"), userController.addUser)
-----------------------------------------------------------------
controller, service, model层处理文件,存地址信息,都需要添加avatar字段
async function addUser (req, res, next) {
const {username, password, age} = req.body
// multer会在req中添加一个file对象 判断有没有该对象,没有的话给个默认头像
const avatar = req.file ? `/uploads/${req.file.filename}` : `/images/default.png`
// 插入数据
await userService.addUser(username, password, age, avatar)
res.send({ok: 1})
}
-----------------------------------------------------------------------------
前端回显图片可以直接用img标签的src属性接收后端返回的地址
axios上传
<div>上传文件<input type="file" id="avatar"></div>
let avatar= document.querySelector("#avatar")
// 获取时是avatar.files[0]
-----------------------------------------------------------
axios请求时
const params = new FormData()
params.append("avatar", avatar.files[0])
params.append("username", username.value)
axios.post("接口", params, {
headers:{ "Content-Type" : "multipart/form-data" }
} ).then( (res) => {
console.log(res)
} )
// 更新
const handelUpdate = () => {
console.log(userForm)
const params = new FormData()
for(let i in userForm){
params.append(i, userForm[i])
}
axios.post("/adminapi/user/upload", params, {
headers:{ "Content-Type" : "multipart/form-data" }
})
}
上传的时候需要看一下，后端需要的是file.raw
const avatarChange = (file) => {
console.log(file.raw)
userForm.avatar = URL.createObjectURL(file.raw)
userForm.file = file.raw
}
881
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
