Home > Article > Web Front-end > VUE3 basic tutorial: Use Vue.js plug-in to encapsulate the image upload component
VUE3 Basic Tutorial: Use the Vue.js plug-in to encapsulate the image upload component
Vue.js is a popular front-end framework that allows developers to create more efficient and flexible applications with less code program. Especially after the release of Vue.js 3, its optimization and improvements have made more developers tend to use it. This article will introduce how to use Vue.js 3 to encapsulate an image upload component plug-in.
Before you start, you need to make sure that Vue.js and Vue CLI have been installed. If it is not installed yet, you can install it by entering the following command in the terminal:
npm install -g vue npm install -g @vue/cli
Next, use the Vue CLI to create a new project and navigate to the root directory of the project in the terminal:
vue create image-uploader cd image-uploader
Install the Vue.js plug-in in the project, use the following command:
npm install vue-upload-image --save
In the created project, you can see a new node_modules
directory, which contains vue- upload-image
plugin. Create a new component ImageUploader.vue
in the root directory of the project and copy the following code into the component:
<template> <div> <label for="photo">Upload Image:</label> <input type="file" ref="fileInput" id="photo" name="photo" v-on:change="uploadImage"> <img v-if="image" :src="image" style="max-width:100%"> </div> </template> <script> import { reactive } from 'vue'; import { uploadImage } from 'vue-upload-image'; export default { name: 'ImageUploader', setup() { const state = reactive({ image: null, }); const uploadImage = async () => { const res = await uploadImage(this.$refs.fileInput.files[0]); if (res.status === 200) { state.image = res.data.url; } }; return { state, uploadImage }; }, }; </script> <style> </style>
In the code, we use a component named ImageUploader
's Vue.js component, which contains a 2e1cf0710519d5598b1f0f14c36ba674
and an d5fd7aea971a85678ba271703566ebfd
element, is used to select the image file that needs to be uploaded, and uses vue-upload- The image plugin sends POST requests to communicate with the backend. After the upload is successful, the selected image file is displayed. Before adding the style, we can use the npm run serve
command in our vue cli scaffolding terminal to view the component at the corresponding local address.
Using in vue components
To call ImageUploader.vue
in a component, just import it and register it for use in another component. For example, add the following content in App.vue
:
<template> <div class="container"> <ImageUploader /> </div> </template> <script> import ImageUploader from './components/ImageUploader.vue'; export default { name: 'App', components: { ImageUploader, }, }; </script> <style> .container { max-width: 800px; margin: 0 auto; } </style>
Now you can run the application using the npm run serve
command and view it in the browser## Applications in #http://localhost:8080. If all goes well, the application will have a component called "ImageUploader" present within it, and images can be uploaded using this component.
ImageUploader.vue:
<template> <div class="image-uploader"> <label for="photo" class="image-uploader__label"> <svg class="image-uploader__icon" viewBox="0 0 24 24"> <path d="M19.5 7H4.5C3.673 7 3 7.673 3 8.5v7c0 .827.673 1.5 1.5 1.5h15c.827 0 1.5-.673 1.5-1.5v-7c0-.827-.673-1.5-1.5-1.5zm-9.75 6.75l-3-3.75h2.25V8h1.5v2.25h2.25l-3 3.75zm8.25-4.5v3h-1.5v-3h-3V8h3V5.25h1.5V8h3v1.5h-3z"/> </svg> <span class="image-uploader__text">Choose a file</span> </label> <input type="file" ref="fileInput" class="image-uploader__input" id="photo" name="photo" v-on:change="uploadImage"> <img v-if="state.image" :src="state.image" class="image-uploader__preview" /> </div> </template> <script> import { reactive } from 'vue'; import { uploadImage } from 'vue-upload-image'; export default { name: 'ImageUploader', setup() { const state = reactive({ image: null, }); const uploadImage = async () => { const res = await uploadImage(this.$refs.fileInput.files[0]); if (res.status === 200) { state.image = res.data.url; } }; return { state, uploadImage }; }, }; </script> <style scoped> .image-uploader { display: flex; flex-direction: column; align-items: center; } .image-uploader__label { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #999; padding: 1rem; margin: 2rem 0; border: dashed 2px #ccc; border-radius: 4px; } .image-uploader__icon { width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; fill: currentColor; } .image-uploader__input { display: none; } .image-uploader__text { text-transform: uppercase; } .image-uploader__preview { margin-top: 2rem; max-width: 100%; border-radius: 4px; } </style>Now, our image upload component style has been added, you can run the project and see the effect. This is a very basic image upload component that you can modify and extend in the code according to your own needs. Additionally, additional features and usage can be found on the plugin’s GitHub page at:
https://github.com/AlbertLucianto/vue-upload-image.
The above is the detailed content of VUE3 basic tutorial: Use Vue.js plug-in to encapsulate the image upload component. For more information, please follow other related articles on the PHP Chinese website!