vue3结合element-plus上传图片的功能

Vue3 结合 Element Plus 实现图片上传功能通常会利用 Element Plus 提供的 `ElUpload` 组件，这是一个强大且易于使用的文件上传组件。以下是基本步骤：

1. 引入依赖：首先，在你的 Vue 文件中安装并引入 Element Plus 的 Upload 组件：

   npm install element-plus uploadjs

2. 创建组件模板：在你的 .vue 文件中，添加一个包含 `ElUpload` 的模板：

   <template>
     <el-upload
       :action="uploadUrl"
       :on-change="handleChange"
       :on-success="handleSuccess"
       :before-upload="beforeUpload"
       :auto-upload="false"
     >
       <el-button type="primary" size="small">选择图片</el-button>
       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，不超过500kb</div>
     </el-upload>
   </template>

3. 定义数据属性：配置相关的变量，如上传URL、处理函数等：

   <script setup>
   import { ref } from 'vue';
   import ElUpload from 'element-plus/upload';

   const uploadUrl = ref('');
   const fileList = ref([]);
   
   // 上传前的验证
   function beforeUpload(file) {
     if (!file.type.includes('image')) {
       alert('只能上传jpg/png文件');
       return false;
     }
     if (file.size > 524288) {
       alert('文件大小不能超过500KB');
       return false;
     }
     return true;
   }

   // 上传变化事件
   function handleChange(file) {
     fileList.value = [...fileList.value, file];
   }

   // 上传成功回调
   function handleSuccess(response, file) {
     console.log(response);
     // 这里可以根据 response 更新服务器状态或进一步处理文件
   }
   </script>

4. 使用组件：将这个自定义的组件添加到你的父组件或需要图片上传的地方。