element UI 上传图片怎么写

Element UI 提供了一个方便的`el-upload`组件来进行文件上传，包括图片。下面是一个基本的使用示例：

<template>
  <div>
    <el-upload
      action="http://your-api-url/upload" {/* 图片上传地址 */}
      :on-change="handleChange"
      :file-list="list"
      :limit="1" {/* 单次最大上传数量 */}
      accept="image/*" {/* 可接受的文件类型 */}
      :before-upload="beforeUpload" {/* 异步请求前的钩子 */}
    >
      <i class="el-icon-plus"></i>
      <span slot="tip">点击上传图片</span>
    </el-upload>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <img :src="item.url" alt="图片预览" />
        <button @click="removeItem(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 存储上传后的图片信息
    };
  },
  methods: {
    handleChange(file) {
      this.list.push({
        name: file.name,
        url: file.url, // 这里的url通常是后台返回的临时路径，最终保存后需要替换
      });
    },
    beforeUpload(file) {
      if (this.limit && this.list.length >= this.limit) {
        alert('最多只能上传一张图片');
        return false;
      }
      // 在这里可以做其他异步处理，比如判断文件大小、格式等
      return true;
    },
    removeItem(index) {
      this.list.splice(index, 1);
    },
  },
};
</script>

这个例子中，`beforeUpload`函数会在上传前运行，你可以在这个函数里添加验证逻辑；`handleChange`用于接收上传完成后的文件信息，并将其添加到列表中；`removeItem`则是用于从列表中移除已上传的图片。