思路
- 以formData的数据格式上传图片
- 后端存储图片到文件夹(/images/)下,并且返回给前端图片名称(imgUrl)
- 前端通过’http://localhost:3000/images/imgUrl’的形式访问图片地址(解决浏览器拒绝访问本地文件),用于展示(这里的访问地址是服务器端口启动的地址)
前端代码
<el-upload
class="avatar-uploader"
action="string"
method="post"
:http-request="uploadImage" // 自定义上传图片函数
>
<img v-if="formLabelAlign.imageUrl" :src="resource+formLabelAlign.imageUrl" class="avatar">
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
<script>
export default {
name: "Attractions",
data() {
return {
formLabelAlign: { title: '', date: '', content: '', imageUrl: '', filename: '', label: ''},
resource: 'http://localhost:3000/images/',
}
},
methods: {
uploadImage(params){
// 图片以formData格式上传,并且请求头需要设置'Content-Type': 'multipart/form-data'
let formData = new FormData()
formData = { file: params.file,}
const config = {
headers:{
'Content-Type': 'multipart/form-data'
}
};
// 发起axios请求
this.request.post('/attractions/uploadImage', formData, config).then(res=>{
// 拿到上传图片的名称,存在imageUrl中
this.formLabelAlign.imageUrl = res.data.data
})
}
},
}
</script>
后端代码
const MsgCode = require("../config/MsgCode");
const multer = require('multer') // 引入multer:图片处理的工具包
const path = require('path')
const storage = multer.diskStorage({
// 配置文件上传后存储的路径
destination: function (req, file, cb) {
// NodeJS的两个全局变量
// console.log("__dirname: ", __dirname); //获取当前文件在服务器上的完整目录
// console.log("__filename: ", __filename); //获取当前文件在服务器上的完整路径
cb(null, path.join(__dirname, '../public/images'))
},
// 配置文件上传后存储的路径和文件名
filename: function (req, file, cb) {
let defineFilename = new Date().getTime() + file.originalname // 防止图片名重复
cb(null, defineFilename)
}
})
const upload = multer({
fileFilter(req, file, callback) {
// 解决中文名乱码的问题
file.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");
callback(null, true);
},
storage: storage
})
// 上传首页图
router.post('/uploadImage',upload.single('file'), function (req, res, next){
// console.log(req.file)
MsgCode(res, req.file.filename, "") // 返回前端的自定义函数,读者可以自己使用res.end()进行数据传输
})
有问题请下方留言,欢迎交流