Vue Practical Combat: Image Upload Component Development

Vue Practical Combat: Image Upload Component Development

Introduction:
Image uploading is one of the common requirements in Web development. This article will introduce how to use the Vue framework to develop a simple image upload component and provide specific code examples.

1. Requirements Analysis
Our image upload component should have the following functions:

1. Users can select an image to upload;
2. Click the upload button After that, upload the selected image to the server;
3. Displays the upload progress and provides the function to cancel the upload;
4. After the upload is completed, it displays a prompt that the upload is successful and provides a link to view the upload result .

2. Project Construction
First, we need to build a project based on Vue. You can use Vue CLI to create it. The specific steps are as follows:

1. Install Vue CLI: Enter npm install -g @vue/cli;
2. on the command line Create a project: Enter vue create image-upload in the command line, and then configure according to the prompts;
3. Enter the project directory: Enter cd image-upload## in the command line #；
Start the project: Enter
4. npm run serve in the command line, and the project will run on the local development server.

3. Develop the image upload component

Create a file named ImageUpload.vue in the src/components directory to write the code for the image upload component.

1. <template>
     <div>
       <input
         type="file"
         @change="handleFileChange"
       />
       <button @click="upload">上传</button>
       <div v-if="uploading">
         <div>{{ progress }}%</div>
         <button @click="cancel">取消上传</button>
       </div>
       <div v-if="uploadSuccess">
         上传成功！
         <a :href="resultURL" target="_blank">查看结果</a>
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         file: null,
         uploading: false,
         progress: 0,
         uploadSuccess: false,
         resultURL: ''
       };
     },
     methods: {
       handleFileChange(event) {
         this.file = event.target.files[0];
       },
       upload() {
         this.uploading = true;
         // 假装上传，每秒增加10%的进度，共耗时10秒
         const timer = setInterval(() => {
           this.progress += 10;
           if (this.progress >= 100) {
             clearInterval(timer);
             this.uploading = false;
             this.uploadSuccess = true;
             this.resultURL = 'http://example.com/result';
           }
         }, 1000);
       },
       cancel() {
         this.uploading = false;
         this.progress = 0;
         this.uploadSuccess = false;
       }
     }
   };
   </script>
   
   <style scoped>
   /* 样式省略 */
   </style>

Use the image upload component just written in the App.vue file.

<template>
  <div id="app">
    <ImageUpload />
  </div>
</template>

<script>
import ImageUpload from "./components/ImageUpload.vue";

export default {
  name: "App",
  components: {
    ImageUpload
  }
};
</script>

<style>
/* 样式省略 */
</style>

4. Testing and running

Run in the command line
1. npm run serve, start the development server;
Open Browser, visit http://localhost:8080, you can see the interface for uploading components;
2. Select an image, click the upload button, you can see the upload progress and a prompt for successful upload;
Click the link in the prompt of successful upload to view the upload results.

Conclusion:

This article introduces the specific steps of using the Vue framework to develop an image upload component and provides code examples. In actual development, appropriate modifications and extensions can be made according to needs to meet the specific requirements of the project. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of Vue Practical Combat: Image Upload Component Development. For more information, please follow other related articles on the PHP Chinese website!