


vue uploads images to the database and displays them on the front-end page
This time I will bring you vue to upload images to the database and display them on the front-end page. What are the precautions for vue to upload images to the database and display them on the front-end page. The following is a practical case, let's take a look.
1. Click to upload a picture, and the picture selection option box will pop up.
Page code:
<p class="form-signin-heading" id="btnUpload" @change="upload">上传图片</p> <input type="file" name="avatar" id="avatar" multiple="multiple" @change="upload"> <img :src="'http://localhost:8888'+item.photos_url" alt=""/>
Since we want to set the style of the uploaded image, we hide the input and do the following operations to send the click event of the input to the p box:
mounted: function () { var upload = document.getElementById("btnUpload"); var avatar = document.getElementById("avatar"); upload.onclick =function(){ avatar.click(); //注意IE的兼容性 }; }
2. Add two files to the controller layer of the api interface and name them yourself, such as:
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. On the page Save the address of the image into the database
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("文件格式不支持上传"); } }
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Summary of js data parsing skills
Detailed explanation of JS string operations
The above is the detailed content of vue uploads images to the database and displays them on the front-end page. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Apple's latest releases of iOS18, iPadOS18 and macOS Sequoia systems have added an important feature to the Photos application, designed to help users easily recover photos and videos lost or damaged due to various reasons. The new feature introduces an album called "Recovered" in the Tools section of the Photos app that will automatically appear when a user has pictures or videos on their device that are not part of their photo library. The emergence of the "Recovered" album provides a solution for photos and videos lost due to database corruption, the camera application not saving to the photo library correctly, or a third-party application managing the photo library. Users only need a few simple steps

Hibernate polymorphic mapping can map inherited classes to the database and provides the following mapping types: joined-subclass: Create a separate table for the subclass, including all columns of the parent class. table-per-class: Create a separate table for subclasses, containing only subclass-specific columns. union-subclass: similar to joined-subclass, but the parent class table unions all subclass columns.

How to use MySQLi to establish a database connection in PHP: Include MySQLi extension (require_once) Create connection function (functionconnect_to_db) Call connection function ($conn=connect_to_db()) Execute query ($result=$conn->query()) Close connection ( $conn->close())

HTML cannot read the database directly, but it can be achieved through JavaScript and AJAX. The steps include establishing a database connection, sending a query, processing the response, and updating the page. This article provides a practical example of using JavaScript, AJAX and PHP to read data from a MySQL database, showing how to dynamically display query results in an HTML page. This example uses XMLHttpRequest to establish a database connection, send a query and process the response, thereby filling data into page elements and realizing the function of HTML reading the database.

To handle database connection errors in PHP, you can use the following steps: Use mysqli_connect_errno() to obtain the error code. Use mysqli_connect_error() to get the error message. By capturing and logging these error messages, database connection issues can be easily identified and resolved, ensuring the smooth running of your application.

Through the Go standard library database/sql package, you can connect to remote databases such as MySQL, PostgreSQL or SQLite: create a connection string containing database connection information. Use the sql.Open() function to open a database connection. Perform database operations such as SQL queries and insert operations. Use defer to close the database connection to release resources.

Using the database callback function in Golang can achieve: executing custom code after the specified database operation is completed. Add custom behavior through separate functions without writing additional code. Callback functions are available for insert, update, delete, and query operations. You must use the sql.Exec, sql.QueryRow, or sql.Query function to use the callback function.

JSON data can be saved into a MySQL database by using the gjson library or the json.Unmarshal function. The gjson library provides convenience methods to parse JSON fields, and the json.Unmarshal function requires a target type pointer to unmarshal JSON data. Both methods require preparing SQL statements and performing insert operations to persist the data into the database.
