VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 이미지 업로드 구성요소 캡슐화

VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 이미지 업로드 구성 요소를 캡슐화합니다.

Vue.js는 개발자가 더 적은 코드로 더 효율적이고 유연한 애플리케이션을 만들 수 있게 해주는 인기 있는 프런트 엔드 프레임워크입니다. 특히 Vue.js 3 출시 이후 최적화와 개선으로 인해 더 많은 개발자가 사용하게 되었습니다. 이 기사에서는 Vue.js 3을 사용하여 이미지 업로드 구성 요소 플러그인을 캡슐화하는 방법을 소개합니다.

시작하기 전에 Vue.js와 Vue CLI가 설치되어 있는지 확인해야 합니다. 아직 설치되지 않은 경우 터미널에 다음 명령을 입력하여 설치할 수 있습니다.

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

다음으로 Vue CLI를 사용하여 새 프로젝트를 생성하고 터미널에서 프로젝트의 루트 디렉터리로 이동합니다.

vue create image-uploader
cd image-uploader

Install 프로젝트.js 플러그인에서 다음 명령을 사용하세요:

npm install vue-upload-image --save

생성된 프로젝트에서 vue-upload-image가 포함된 새로운 node_modules 디렉터리를 볼 수 있습니다. > 플러그인. 프로젝트의 루트 디렉터리에 새 구성 요소 ImageUploader.vue를 만들고 다음 코드를 구성 요소에 복사합니다. 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

코드에서는 ImageUploader라는 이름을 사용합니다. <label></label> 및 <input> 요소가 포함된 Vue.js 구성 요소는 업로드해야 하는 이미지 파일을 선택하는 데 사용되며 vue를 사용합니다. -upload- 이미지 플러그인은 백엔드와 통신하기 위해 POST 요청을 보냅니다. 업로드가 성공하면 선택한 이미지 파일이 표시됩니다. 스타일을 추가하기 전에 vue cli 스캐폴딩 터미널에서 npm run Serve 명령을 사용하여 해당 로컬 주소의 구성 요소를 볼 수 있습니다.

vue 구성 요소에서 사용

구성 요소에서 ImageUploader.vue를 호출하려면 해당 구성 요소를 가져와서 다른 구성 요소에 등록하면 됩니다. 예를 들어 App.vue에 다음 콘텐츠를 추가합니다. 🎜rrreee🎜이제 npm run Serve 명령을 사용하여 애플리케이션을 실행하고 브라우저에서 http를 볼 수 있습니다. ://localhost:8080의 애플리케이션. 모든 것이 순조롭게 진행되면 애플리케이션에는 "ImageUploader"라는 구성 요소가 포함되며 이 구성 요소를 사용하여 이미지를 업로드할 수 있습니다. 🎜🎜마지막으로 이미지 업로드 구성 요소를 더 잘 표현하기 위해 스타일을 추가할 수 있습니다. ImageUploader.vue 수정: 🎜rrreee🎜이제 이미지 업로드 구성 요소 스타일이 추가되었으므로 프로젝트를 실행하고 효과를 확인할 수 있습니다. 이는 필요에 따라 코드를 수정하고 확장할 수 있는 매우 기본적인 이미지 업로드 구성 요소입니다. 또한 추가 기능과 사용법은 플러그인의 GitHub 페이지(https://github.com/AlbertLucianto/vue-upload-image)에서 확인할 수 있습니다. 🎜🎜요약🎜🎜이 글에서는 Vue.js 3 및 vue-upload-image 플러그인을 사용하여 기본 이미지 업로드 구성 요소를 캡슐화하는 방법을 소개합니다. 유효성 검사, 파일 크기 제한, 미리 보기 등과 같은 다른 많은 기능을 이 구성 요소에 추가할 수 있습니다. 이 튜토리얼을 사용하면 보다 효율적이고 유용한 Vue.js 개발을 달성할 수 있습니다. 🎜

위 내용은 VUE3 기본 튜토리얼: Vue.js 플러그인을 사용하여 이미지 업로드 구성요소 캡슐화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!