elementui上传图片自定义方法

在 Element UI 中，可以使用 el-upload 组件来实现图片上传功能。要自定义上传方法，可以使用自定义上传组件方法。下面是一个示例代码：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :limit="1"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
      <el-button size="small" type="success" @click="upload">上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: '/api/upload',
      fileList: [],
    };
  },
  methods: {
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('只能上传jpg/png文件！');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('文件大小不能超过2MB！');
        return false;
      }

      return true;
    },
    handleSuccess(response, file, fileList) {
      // 处理上传成功的逻辑
      console.log(response);
      this.fileList = fileList;
    },
    handleError(error, file, fileList) {
      // 处理上传失败的逻辑
      console.log(error);
      this.fileList = fileList;
    },
    upload() {
      // 手动触发上传
      this.$refs.upload.submit();
    },
  },
};
</script>

在上述代码中，`uploadUrl` 是上传图片的接口地址，你需要根据实际情况修改。`beforeUpload` 方法用于在上传之前进行文件类型和大小的校验。`handleSuccess` 和 `handleError` 方法分别用于处理上传成功和失败的逻辑。`upload` 方法用于手动触发上传。

你可以根据实际需求对这个示例进行修改和扩展，以满足你的自定义上传方法的需求。