vue 数据库 登录界面_vue实现的上传图片到数据库并显示到页面功能示例

vue实现的上传图片到数据库并显示到页面功能示例

2019-01-07

编程之家收集整理的这篇文章主要介绍了vue实现的上传图片到数据库并显示到页面功能示例，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例讲述了vue实现的上传图片到数据库并显示到页面功能。分享给大家供大家参考，具体如下：

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

上传图片

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

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

upFile.js

上传后文件路径，uploads文件夹会自动创建。

destination: function (req,file,cb) {

cb(null,'./public/uploads')

},//给上传文件重命名，获取添加后缀名

filename: function (req,cb) {

let fileFormat = (file.originalname).split(".");

cb(null,file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);

}

});

//添加配置文件到multer对象。

let upload = multer({

stor