Tutoriel de base VUE3 : Utilisez le plug-in Vue.js pour encapsuler le composant de téléchargement d'image

Tutoriel de base de VUE3 : utilisez le plug-in Vue.js pour encapsuler le composant de téléchargement d'images

Vue.js est un framework frontal populaire qui permet aux développeurs de créer des applications plus efficaces et plus flexibles . Surtout après la sortie de Vue.js 3, son optimisation et ses améliorations ont incité davantage de développeurs à l'utiliser. Cet article explique comment utiliser Vue.js 3 pour encapsuler un plug-in de composant de téléchargement d'images.

Avant de commencer, vous devez vous assurer que Vue.js et Vue CLI ont été installés. S'il n'est pas encore installé, vous pouvez l'installer en entrant la commande suivante dans le terminal :

npm install -g vue
npm install -g @vue/cli

Ensuite, utilisez Vue CLI pour créer un nouveau projet et accédez au répertoire racine du projet dans le terminal : #🎜🎜 #

vue create image-uploader
cd image-uploader

Installez le plug-in Vue.js dans le projet, utilisez la commande suivante :

npm install vue-upload-image --save

Dans le projet créé, vous pouvez voir un nouveau node_modules, Il contient le plug-in vue-upload-image. Créez un nouveau composant ImageUploader.vue dans le répertoire racine du projet et copiez le code suivant dans le composant :

<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>

node_modules目录，其中包含vue-upload-image插件。在项目的根目录中创建一个新组件ImageUploader.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>

在代码中，我们使用名为ImageUploader的Vue.js组件，其中包含一个<label>和一个<input>元素，用于选择需要上传的图像文件，并使用vue-upload-image插件发送POST请求与后端进行通信。上传成功后，显示选择的图像文件。在添加样式之前，我们可以在我们的vue cli脚手架终端中使用npm run serve命令以对应的本地地址查看该组件。

在vue组件中使用

要在组件中调用ImageUploader.vue，只需将其导入并在另一个组件中注册使用即可。例如，在App.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>

现在可以使用npm run serve命令运行该应用程序，并在浏览器中查看http://localhost:8080中的应用程序。如果一切顺利，该应用程序将在其中显示一个名为“ImageUploader”的组件，并且可以使用该组件上传图片。

最后，我们可以添加样式以更好地呈现图片上传组件。修改一下ImageUploader.vue：

rrreee

现在，我们的图片上传组件样式已经添加完成，你可以运行项目，并查看效果。这是一个非常基础的图片上传组件，大家可以在代码中根据自己的需要进行修改和扩展。此外，还可以在插件的GitHub页面中找到其他功能和用法，链接为：https://github.com/AlbertLucianto/vue-upload-imageDans le code, nous utilisons le fichier nommé Le composant Vue.js d'ImageUploader, qui contient un élément <label> et un élément <input> pour sélectionner le fichier image à télécharger. Et utilisez le plugin vue-upload-image pour envoyer des requêtes POST afin de communiquer avec le backend. Une fois le téléchargement réussi, le fichier image sélectionné s'affiche. Avant d'ajouter le style, nous pouvons utiliser la commande npm run serve dans notre terminal d'échafaudage vue cli pour afficher le composant à l'adresse locale correspondante.

Utiliser dans le composant vue

Pour appeler ImageUploader.vue dans un composant, importez-le simplement et enregistrez-le dans un autre composant. Par exemple, ajoutez le contenu suivant dans App.vue :

rrreee#🎜🎜# Vous pouvez maintenant utiliser la commande npm run serve pour exécuter l'application et afficher dans le navigateur. Affichez l'application dans http://localhost:8080. Si tout se passe bien, l'application contiendra un composant appelé "ImageUploader" et les images pourront être téléchargées à l'aide de ce composant. #🎜🎜##🎜🎜#Enfin, nous pouvons ajouter des styles pour mieux présenter le composant de téléchargement d'images. Modifiez ImageUploader.vue : #🎜🎜#rrreee#🎜🎜#Maintenant, notre style de composant de téléchargement d'image a été ajouté, vous pouvez exécuter le projet et voir l'effet. Il s'agit d'un composant de téléchargement d'images très basique que vous pouvez modifier et étendre dans le code en fonction de vos propres besoins. De plus, des fonctionnalités et une utilisation supplémentaires peuvent être trouvées sur la page GitHub du plugin à l'adresse : https://github.com/AlbertLucianto/vue-upload-image. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Cet article explique comment utiliser Vue.js 3 et le plug-in vue-upload-image pour encapsuler un composant de téléchargement d'image de base. De nombreuses autres fonctionnalités peuvent être ajoutées à ce composant, telles que la validation, les limites de taille de fichier, les aperçus, etc. Utilisez ce didacticiel pour vous aider à réaliser un développement Vue.js plus efficace et plus utile. #🎜🎜#

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!