VUE3基础教程：使用Vue.js插件封装图片上传组件-Vue.js-PHP中文网

VUE3基础教程：使用Vue.js插件封装图片上传组件

WBOY

发布： 2023-06-15 23:07:38

原创

2508人浏览过

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

登录后复制

在项目中安装Vue.js插件，使用以下命令：

立即学习“前端免费学习笔记（深入）”；

npm install vue-upload-image --save

登录后复制

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

在vue组件中使用

秘塔写作猫

秘塔写作猫是一个集AI写作、校对、润色、配图等为一体的创作平台

127

查看详情

要在组件中调用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-image。

总结

本文介绍了如何使用Vue.js 3和vue-upload-image插件来封装一个基础的图片上传组件。许多其他功能可以添加到该组件中，例如验证、文件大小限制、预览等等。使用此教程可帮助您进行更高效和有用的Vue.js开发。

以上就是VUE3基础教程：使用Vue.js插件封装图片上传组件的详细内容，更多请关注php中文网其它相关文章！