Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Bild-Upload-Komponente zu kapseln

VUE3-Basis-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Bild-Upload-Komponente zu kapseln.

Vue.js ist ein beliebtes Front-End-Framework, mit dem Entwickler effizientere und flexiblere Anwendungen mit weniger Code erstellen können. Insbesondere nach der Veröffentlichung von Vue.js 3 haben dessen Optimierungen und Verbesserungen dazu geführt, dass immer mehr Entwickler dazu neigen, es zu verwenden. In diesem Artikel wird erläutert, wie Sie mit Vue.js 3 ein Plug-In für Bild-Upload-Komponenten kapseln.

Bevor Sie beginnen, müssen Sie sicherstellen, dass Vue.js und Vue CLI installiert sind. Wenn es noch nicht installiert ist, können Sie es installieren, indem Sie den folgenden Befehl im Terminal eingeben:

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

Als nächstes erstellen Sie ein neues Projekt mit der Vue-CLI und navigieren zum Stammverzeichnis des Projekts im Terminal:

vue create image-uploader
cd image-uploader

Install Verwenden Sie im Projekt.js-Plugin den folgenden Befehl:

npm install vue-upload-image --save

Im erstellten Projekt sehen Sie ein neues Verzeichnis node_modules, das das vue-upload-image Plug-in. Erstellen Sie eine neue Komponente <code>ImageUploader.vue im Stammverzeichnis des Projekts und kopieren Sie den folgenden Code in die Komponente: node_modules目录，其中包含vue-upload-image插件。在项目的根目录中创建一个新组件ImageUploader.vue，并将以下代码复制到该组件中：

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

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

在vue组件中使用

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

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

最后，我们可以添加样式以更好地呈现图片上传组件。修改一下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>

现在，我们的图片上传组件样式已经添加完成，你可以运行项目，并查看效果。这是一个非常基础的图片上传组件，大家可以在代码中根据自己的需要进行修改和扩展。此外，还可以在插件的GitHub页面中找到其他功能和用法，链接为：https://github.com/AlbertLucianto/vue-upload-imagerrreee

Im Code verwenden wir den Namen ImageUploader Die Vue.js-Komponente, die ein 2e1cf0710519d5598b1f0f14c36ba674- und ein d5fd7aea971a85678ba271703566ebfd-Element enthält, wird verwendet, um die Bilddatei auszuwählen, die hochgeladen werden muss, und verwendet Vue -upload- Das Bild-Plugin sendet POST-Anfragen, um mit dem Backend zu kommunizieren. Nach erfolgreichem Upload wird die ausgewählte Bilddatei angezeigt. Bevor wir den Stil hinzufügen, können wir den Befehl npm run servo in unserem Vue-CLI-Gerüstterminal verwenden, um die Komponente an der entsprechenden lokalen Adresse anzuzeigen.

Wird in der Vue-Komponente verwendet

Um ImageUploader.vue in einer Komponente aufzurufen, importieren Sie es einfach und registrieren Sie es in einer anderen Komponente. Fügen Sie beispielsweise den folgenden Inhalt in App.vue hinzu: 🎜rrreee🎜Jetzt können Sie die Anwendung mit dem Befehl npm run servo ausführen und http im Browser anzeigen Bewerbungen unter ://localhost:8080. Wenn alles gut geht, verfügt die Anwendung über eine Komponente namens „ImageUploader“, mit der Bilder hochgeladen werden können. 🎜🎜Schließlich können wir Stile hinzufügen, um die Bild-Upload-Komponente besser darzustellen. Ändern Sie ImageUploader.vue: 🎜rrreee🎜Jetzt wurde unser Bild-Upload-Komponentenstil hinzugefügt, Sie können das Projekt ausführen und den Effekt sehen. Hierbei handelt es sich um eine sehr einfache Komponente zum Hochladen von Bildern, die Sie im Code entsprechend Ihren eigenen Anforderungen ändern und erweitern können. Darüber hinaus finden Sie zusätzliche Funktionen und Verwendungsmöglichkeiten auf der GitHub-Seite des Plugins unter: https://github.com/AlbertLucianto/vue-upload-image. 🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird erläutert, wie Sie Vue.js 3 und das Vue-Upload-Image-Plug-In verwenden, um eine grundlegende Bild-Upload-Komponente zu kapseln. Dieser Komponente können viele weitere Funktionen hinzugefügt werden, z. B. Validierung, Dateigrößenbeschränkungen, Vorschauen und mehr. Verwenden Sie dieses Tutorial, um eine effizientere und nützlichere Vue.js-Entwicklung zu erreichen. 🎜

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Bild-Upload-Komponente zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!