element UI 上传图片怎么调接口

Element UI 的文件上传组件 `el-upload` 提供了丰富的功能，包括图片上传。如果你想要通过这个组件调用接口上传图片，通常需要按照以下步骤操作：

1. 安装依赖：首先确保你已经安装了 Vue.js 和 Element UI。如果还没有安装，可以使用 npm 或 yarn 进行安装：

   npm install vue-element-ui

2. 引入组件和相关的库：在你的 Vue 组件中引入 `el-upload` 和 Axios（或其他你喜欢的HTTP客户端库），例如：

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

3. 配置上传选项：创建一个配置对象，设置上传接口 URL、请求头、上传处理函数等：

   const uploadOptions = {
     action: '/api/upload', // 你的图片上传 API 地址
     headers: { Authorization: 'Bearer your-token' }, // 如果有认证需求
     onBeforeUpload(file) {
       // 在这里你可以添加验证逻辑，如检查文件类型、大小等
     },
     onSuccess(response, file) {
       console.log('上传成功:', response.data);
     },
     onFailure(error, file) {
       console.error('上传失败:', error);
     }
   };

4. 使用 `el-upload` 组件：

   <template>
     <el-upload
       :options="uploadOptions"
       multiple
       accept="image/*" // 可接受的图片类型
       :auto-upload="false" // 是否默认立即上传，此处关闭以便控制
       @change="handleFileChange"
     >
       <i class="el-icon-plus"></i> 打开选择
     </el-upload>
   </template>

   <script>
   export default {
     data() {
       return {
         uploadOptions,
       };
     },
     methods: {
       handleFileChange(files) {
         // files 是用户选择的文件数组
         for (const file of files) {
           axios.post(uploadOptions.action, file).then((response) => {
             // 根据 API 返回的数据做进一步处理
           });
         }
       },
     },
   };
   </script>

记得替换 `/api/upload` 为你实际的接口地址，并根据需要调整其他的选项和事件处理器。这样，每次用户选择并上传图片后，就会触发调用上传接口。