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-imageplugin. 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 <label> and an <input> 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.

Finally, we can add styles to better present the image upload component. Modify

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.

Summary

This article introduces how to use Vue.js 3 and the vue-upload-image plug-in to encapsulate a basic image upload component. Many other features can be added to this component, such as validation, file size limits, previews, and more. Use this tutorial to help you achieve more efficient and useful Vue.js development.

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!