Analysis of communication between Vue and the server: How to implement file upload
Overview:
In Vue development, communication with the server is a very critical link . Implementing the file upload function is one of the common requirements in development. This article will combine code examples to explore how to implement the file upload function in Vue.
1. Front-end preparation
1. Create a Vue project and introduce necessary dependencies:
Enter the project directory in the terminal and execute the following command to create a Vue project:
1 |
|
Then Enter the project directory and install axios and element-ui:
1 2 |
|
2. Configure the file upload component:
Create the FileUpload.vue file in the src/components directory and write the following basic code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
2. Server-side preparations
1. Create a Node.js server:
Create the server.js file in the project root directory and write the following code:
1 2 3 4 5 6 7 8 9 10 |
|
2. Installation is necessary Dependencies:
Enter the project directory in the terminal and execute the following command to install the necessary dependencies:
1 |
|
Among them, express is used to create the Node.js server, and multer is used to process file uploads.
3. Configure file upload middleware:
Introduce multer in the server.js file and configure file upload middleware:
1 2 3 4 5 6 7 8 |
|
Among them, dest is used to specify the temporary file upload Storage path, upload.single() specifies that only a single file can be uploaded, and the uploaded file will be stored in the dest path.
4. Process file upload logic:
Add the business logic of file upload in the server.js file:
1 2 3 4 5 6 7 8 9 10 11 |
|
In the above code, first determine whether req.file exists, determine Whether the user selects a file to upload. Then, when the if condition is established, you can perform subsequent operations on the file upload, such as storing the file in the specified directory on the server, or performing other business processing. Finally, a response is returned through res.status(200) to notify the front-end that the file upload is successful.
3. Front-end and server-side communication
In the FileUpload.vue file, add an axios request to achieve communication with the server-side:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
In the handleFileChange method, create a FormData object, Use the append() method to add the uploaded file to FormData. Then, send a POST request through the axios.post() method, and send FormData as the request body to the corresponding route on the server side. Finally, obtain the data returned by the server through response.data, or catch the exception when the request fails in catch.
4. Summary
Through the above steps, we successfully implemented the file upload function between Vue and the server. In the Vue project, we configure the el-upload component of element-ui and combine it with axios to send a POST request for file upload. On the server side, we use express and multer to handle the logic of file upload.
I hope this article can bring some help to you in using file upload in Vue development!
The above is the detailed content of Analysis of Vue and server-side communication: how to implement file upload. For more information, please follow other related articles on the PHP Chinese website!