el-upload图片上传，删除

el-upload是ElementUI中的一个组件，可以用来实现图片上传功能。下面是一个基本的el-upload的示例代码：

<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500KB = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传的图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500KB) {
        this.$message.error('上传的图片大小不能超过 500KB!');
      }
      return isJPG && isLt500KB;
    }
  }
};
</script>

上面的代码实现了一个上传图片的功能，点击“点击上传”按钮，可以选择需要上传的图片，然后会执行beforeUpload函数做图片格式和大小的检查，如果通过检查，会上传图片到服务端，上传成功后会自动调用handleSuccess函数处理返回的图片URL。其中，action属性指定了上传的URL，show-file-list属性表示是否显示已上传的图片列表。

如果要实现删除图片的功能，可以通过v-if指令控制上传按钮和已上传的图片的显示和隐藏。删除图片时，只需要清空imageUrl即可。下面是示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      v-if="!imageUrl">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <img :src="imageUrl" v-if="imageUrl">
    <el-button v-if="imageUrl" size="small" type="danger" @click="handleDelete">删除图片</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleSuccess(response) {
      this.imageUrl = response.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500KB = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传的图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500KB) {
        this.$message.error('上传的图片大小不能超过 500KB!');
      }
      return isJPG && isLt500KB;
    },
    handleDelete() {
      this.imageUrl = '';
    }
  }
};
</script>