用vue+element写一个上传组件

好的，以下是一个基于Vue和Element UI的上传组件示例：

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

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

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt500k) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
        return false;
      }
      return true;
    },
    handleSuccess(res, file) {
      this.$emit('upload-success', res);
      this.fileList = [];
    }
  }
}
</script>

<style scoped>
.upload-demo {
  display: inline-block;
  margin-right: 8px;
}
</style>

在这个示例中，我们使用了Element UI的`el-upload`组件来实现文件上传功能。我们定义了一个`fileList`数组来存储上传的文件列表，定义了一个`uploadUrl`变量来指定上传文件的接口地址。我们使用`beforeUpload`方法来限制上传文件的大小和格式，使用`handleSuccess`方法来处理上传成功后的回调。在`beforeUpload`方法中，我们判断文件的类型和大小是否符合要求，如果不符合，我们会返回false来终止上传操作。

通过以上的代码示例，您就可以在Vue项目中使用Element UI来实现一个简单的文件上传组件了。