Vue allows you to upload images to the database and display them on the page.

Vue allows you to upload images to the database and display them on the page.

This example describes how to upload images to a database and display them on a page. We will share this with you for your reference. The details are as follows:

1. Click Upload image. The select image option box is displayed.

Page code:

<Div class = "form-signin-heading" id = "btnUpload" @ change = "upload"> upload an image </div> <input type = "file" name = "avatar "id =" avatar "multiple =" multiple "@ change =" upload "> 

Because we need to set the upload image style, we need to hide the input and perform the following operations to send the input click event to the div box:

Mounted: function () {var upload = document. getElementById ("btnUpload"); var avatar = document. getElementById ("avatar"); upload. onclick = function () {avatar. click (); // check IE compatibility };}

2. Add two files to the controller layer of the api and name them as needed. For example:

UpFile. js

Let multer = require ('multer '); let storage = multer. diskStorage ({// sets the file path after upload. The uploads folder is automatically created. Destination: function (req, file, cb) {cb (null ,'. /public/uploads ')}, // rename the uploaded file and obtain the filename: function (req, file, cb) {let fileFormat = (file. originalname ). split (". "); cb (null, file. fieldname + '-' + Date. now () + ". "+ fileFormat [fileFormat. length-1]) ;}}); // Add the configuration file to the multer object. Let upload = multer ({storage: storage}); module. exports = upload;

UpFileController. js

Var muilter = require ('./upFile. js'); // multer must have the name of the form upload field in single. Var upload = muilter. single ('file'); function dataInput (req, res) {upload (req, res, function (err) {// Add error handling if (err) {return console. log (err);} // The file information is in req. file or req. files. Let photoPath = req. file. path; photoPath = photoPath. replace (/public/, ""); // remove the public \ in the file path; otherwise, it will conflict with the static resource configuration/Save the photoPath to the database to console. log (photoPath); res. send (photoPath) ;});} module. exports = {dataInput };

3. Save the image address to the database on the page.

Upload: function (e) {var that = this; let formData = new window. formData (); let file = e.tar get. files [0]; formData. append ('file', file); // Use append to add data to the form object // use split cut to get the format of the uploaded file var src = file. name, formart = src. split (". ") [1]; // use if to determine whether the format of the uploaded file conforms to if (formart = "jpg" | formart = "png" | formart = "docx" | formart =" txt "| formart =" ppt "| formart =" xlsx "| formart =" zip "| formart =" rar "| formart =" doc ") {// ajax request this is triggered only when the preceding format is met. $ 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 ("request error") ;})} else {alert ("file format does not support uploading ");}}

I hope this article will help you design vue. js programs.