vue3+element的上传图片

在Vue3中结合Element UI使用文件上传功能，你可以利用Element UI提供的`el-upload`组件。这是一个方便处理文件上传的组件，步骤如下：

1. 首先，在你的项目中安装Element UI和相关的依赖：

   npm install element-ui@latest axios // 如果还没有安装axios用于发送HTTP请求

2. 引入需要的模块：

   import { ElUpload } from 'element-plus';
   import axios from 'axios';

3. 在模板中创建上传区域：

   <template>
     <div>
       <el-upload
         :action="uploadUrl" // 你需要的上传地址，通常是后端API
         :on-change="handleImageChange"
         :file-list="imagesList"
         :auto-upload="false" // 自动上传关闭，可以手动触发
         accept="image/*" // 只接受图片文件
       >
         <i class="el-icon-plus"></i> 添加图片
       </el-upload>

       <!-- 显示已上传的图片 -->
       <el-row>
         <el-col v-for="(item, index) in imagesList" :key="index">
           <el-image :src="item.url" width="100%" fit></el-image>
         </el-col>
       </el-row>
     </div>
   </template>

4. 定义方法来处理改变和上传事件：

   export default {
     data() {
       return {
         uploadUrl: '',
         imagesList: [],
       };
     },
     methods: {
       handleImageChange(file) {
         this.imagesList.push({ url: file.response.data.url }); // 假设后端返回的是图片URL
       },
       // 模拟异步上传，实际项目中替换为axios或其他库发起POST请求
       handleUpload(e) {
         axios.post(this.uploadUrl, e.file).then((res) => {
           const imageUrl = res.data.url; // 后台返回的图片URL
           this.imagesList.push({ url: imageUrl });
         });
       },
     },
   };