Element的图片上传在vue3中怎么调用上传图片方法接口

在Vue 3中，如果你想使用Element UI组件如`el-upload`来进行图片上传，首先你需要安装Element UI以及axios这样的HTTP库（如果你还没有安装的话），可以使用npm或yarn来安装：

npm install element-ui axios
# 或者
yarn add element-ui axios

然后，在你的项目里创建一个`Upload.vue`文件，展示如何调用上传图片方法的接口：

<template>
  <div>
    <el-upload
      ref="upload"
      :action="uploadUrl" // 你的图片上传接口地址
      :on-change="handleChange"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      accept="image/*"
    >
      <i class="el-icon-plus"></i> <em>点击上传</em>
    </el-upload>
    <!-- 这里只是示例，实际处理上传结果的地方 -->
    <p v-if="fileList.length">已上传{{ fileList.length }}张图片：</p>
    <el-row :gutter="10">
      <el-col v-for="(item, index) in fileList" :key="index" :span="3">
        <img :src="item.url" alt="" :width="100" :height="100">
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploadUrl: '', // 设置你的API URL
      fileList: [], // 存储上传的图片信息
    };
  },
  methods: {
    handleChange(file) {
      this.fileList.push({
        name: file.name,
        url: file.response.url, // 假设服务器返回新生成的图片URL
      });
    },
    handleSuccess(response, file) {
      // 对于axios，response通常是一个Promise，这里假设它包含了新的图片URL
      axios.post(this.uploadUrl, { file }, {}).then(res => {
        this.handleChange(res.data); // 更新上传状态
      }).catch(err => console.error('上传失败', err));
    },
    beforeUpload(file) {
      if (file.type.match(/image.*/)) {
        const isLt5M = file.size / 1024 / 1024 < 5; // 检查是否小于5MB
        if (!isLt5M) {
          alert('请上传不超过5MB的图片');
          return false;
        }
      } else {
        alert('只支持图片上传!');
        return false;
      }
      return true;
    },
  },
};
</script>

在这个例子中，我们监听了`change`事件来添加文件到列表，并在`success`回调中发送POST请求更新服务器。`before-upload`用于在上传前检查文件类型和大小。