vue上传图片到数据库并显示到页面

PHP中文网 • 2025年3月8日 16:09:48 • 编程技术 • 阅读 2

本文主要和大家介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下，希望能帮助到大家。

1、点击上传图片，弹出选择图片选项框。

页面代码：

上传图片

登录后复制

由于我们要设置上传图片的样式，所以把input隐藏，并要做如下操作把input的点击事件给p框：

mounted: function () { var upload = document.getElementById("btnUpload"); var avatar = document.getElementById("avatar"); upload.onclick =function(){  avatar.click(); //注意IE的兼容性 };}

登录后复制

2、在api接口的controller层加入两个文件，命名自己定，如：

立即学习“前端免费学习笔记（深入）”；

upFile.js

let multer=require('multer');let storage = multer.diskStorage({  //设置上传后文件路径，uploads文件夹会自动创建。  destination: function (req, file, cb) {    cb(null, './public/uploads')  },  //给上传文件重命名，获取添加后缀名  filename: function (req, file, cb) {    let fileFormat = (file.originalname).split(".");    cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);  }});//添加配置文件到multer对象。let upload = multer({  storage: storage});module.exports = upload;

登录后复制

upFileController.js

var muilter = require('./upFile.js');//multer有single()中的名称必须是表单上传字段的name名称。var upload=muilter.single('file');function dataInput(req, res) {  upload(req, res, function (err) {    //添加错误处理    if (err) {      return console.log(err);    }    //文件信息在req.file或者req.files中显示。    let photoPath = req.file.path;    photoPath = photoPath.replace(/public/,"");//将文件路径中的public去掉，否则会和静态资源配置冲突    //将photoPath存入数据库即可    console.log(photoPath);    res.send(photoPath);  });}module.exports = {  dataInput};

登录后复制

3、在页面中将图片的地址存到数据库

upload: function (e) {    var that = this;    let formData = new window.FormData();    let file = e.target.files[0];    formData.append('file',file);//通过append向form对象添加数据    //利用split切割，拿到上传文件的格式    var src = file.name,     formart = src.split(".")[1];    //使用if判断上传文件格式是否符合    if (formart == "jpg" || formart == "png" ||     formart == "docx" || formart == "txt" ||     formart == "ppt" || formart == "xlsx" ||     formart == "zip" || formart == "rar" ||     formart == "doc") {     //只有满足以上格式时，才会触发ajax请求     this.$axios.post(this.$api.personalCenter.upFile,formData).then(function (res) {      that.upFileData = res.data;     }).then(function (res) {      var params = {       photos_url: that.upFileData,       photo_des: ''      };//      console.log(params.photos_url,'photos_url')      that.$axios.post(that.$api.personalCenter.wallAdd,qs.stringify(params)).then(function (res) {       console.log(res.data);       that.$options.methods.imgList.bind(that)();      }).catch(function (err) {       console.log(err);       console.log("请求出错");      })     })    } else {     alert("文件格式不支持上传");    }}

登录后复制