Vue3+element-plus 实现图片图片

在现代前端开发中，实现图片上传功能是非常常见的需求。借助 Vue 3 和 Element Plus，我们可以很方便地搭建一个用户友好的图片上传界面。本文将介绍如何使用 Vue 3 搭配 Element Plus 来实现图片上传功能，并分享一些代码示例。

一、项目初始化

首先，我们需要创建一个 Vue 3 项目。如果你还没有创建项目，可以使用 Vue CLI 来快速搭建：

npm install -g @vue/cli
vue create my-project
cd my-project

在项目中安装 Element Plus：

npm install element-plus

接下来，在 main.js 文件中引入 Element Plus 并进行全局注册：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

二、实现图片上传功能

接下来，我们可以在 App.vue 中实现图片上传功能。Element Plus 提供了 el-upload 组件来帮助我们实现文件上传。

以下是一个基本的图片上传组件示例：

<template>
  <div class="upload-demo">
    <h2>图片上传示例</h2>
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"  <!-- 模拟接口 -->
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :auto-upload="false"
      accept="image/*"
      :limit="5"
      :on-exceed="handleExceed"
    >
      <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip" v-if="fileList.length >= 5">
        只能上传最多 {5} 张图片
      </div>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" />
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const fileList = ref([]);
    const dialogVisible = ref(false);
    const imageUrl = ref('');

    const beforeUpload = (file) => {
      const isImage = file.type.startsWith('image/');
      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      return isImage;
    };

    const handlePreview = (file) => {
      imageUrl.value = URL.createObjectURL(file.raw);
      dialogVisible.value = true;
    };

    const handleRemove = (file) => {
      console.log(file);
    };

    const handleExceed = (files) => {
      this.$message.warning(`当前限制选择 5 张图片`);
    };

    const handleUpload = () => {
      // 请求上传逻辑
      fileList.value.forEach((file) => {
        const formData = new FormData();
        formData.append('file', file.raw);

        // 这里假设使用 axios 来上传文件，你需要根据实际情况来修改
        // axios.post('upload_url', formData).then(response => {
        //   console.log(response);
        // });
      });
      console.log("上传的文件列表:", fileList.value);
    };

    return {
      fileList,
      dialogVisible,
      imageUrl,
      beforeUpload,
      handlePreview,
      handleRemove,
      handleExceed,
      handleUpload,
    };
  },
};
</script>

<style>
.upload-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-dialog {
  max-width: 500px;
}
</style>

三、功能解析

1. 文件列表管理：使用 fileList 对象来管理上传的文件。每当用户上传新文件时，它会自动更新。

2. 文件类型和数量限制：通过 beforeUpload 方法实现对文件类型的限制，确保用户上传的文件是图片格式。同时，设置上传数量的限制为 5 张，在超过时给予提示。

3. 文件预览：在 handlePreview 函数中，我们使用 URL.createObjectURL 生成文件的预览链接，点击文件时会弹出预览对话框。

4. 处理上传：在 handleUpload 方法中，处理文件的实际上传逻辑，注意这里的请求地址需要替换成你自己的 API 接口。

结语

通过上面的示例，我们成功实现了一个简单的图片上传组件。你可以根据自己的需求进行扩展，比如加入上传进度条、错误处理等功能。希望这可以为你的项目提供帮助！