帮我写用vue写一个el-upload组件，组件中有上传文件，删除文件，查看文件和重新上传文件功能

好的，下面是一个用Vue实现el-upload组件，并包含上传文件、删除文件、查看文件和重新上传文件功能的示例代码：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :file-list="fileList"
      multiple
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-divider></el-divider>
    <el-table :data="fileList" style="width: 100%">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="name" label="文件名"></el-table-column>
      <el-table-column prop="size" label="大小" :formatter="formatFileSize"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleView(scope.$index)">查看</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
          <el-button size="mini" type="primary" @click="handleUpload(scope.$index)">重新上传</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      const { name, url, size } = response
      this.fileList.push({ name, url, size })
      this.$message.success(`${file.name} 上传成功`)
    },
    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 格式!')
      }
      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!')
      }
      return isJPG && isLt500K
    },
    formatFileSize(size) {
      if (size < 1024) {
        return `${size}B`
      } else if (size < 1024 * 1024) {
        return `${(size / 1024).toFixed(2)}KB`
      } else {
        return `${(size / 1024 / 1024).toFixed(2)}MB`
      }
    },
    handleView(index) {
      window.open(this.fileList[index].url)
    },
    handleDelete(index) {
      this.fileList.splice(index, 1)
      this.$message.success('删除成功')
    },
    handleUpload(index) {
      const file = this.fileList[index]
      this.fileList.splice(index, 1)
      this.$refs.upload.submit()
      this.$message.success(`重新上传 ${file.name}`)
    }
  }
}
</script>

<style>
.upload-demo {
  margin-bottom: 20px;
}
</style>

在上述代码中，我们使用了el-upload组件实现文件上传功能，并且使用了el-table组件展示上传的文件列表。同时，我们还实现了查看、删除和重新上传文件的功能。

具体实现步骤如下：

1. 在template中，我们使用el-upload组件实现文件上传功能。我们设置了上传接口地址，成功上传的回调函数，上传文件列表和上传前的检查函数等参数。
2. 我们使用了el-divider分割线和el-table组件展示上传的文件列表。在el-table中，我们展示了文件的序号、文件名、文件大小和操作按钮。
3. 我们实现了handleView、handleDelete和handleUpload三个函数，分别用于查看、删除和重新上传文件。这些函数会对fileList中的文件进行操作，并且会弹出提示框提示操作结果。
4. 我们还实现了formatFileSize函数，用于格式化文件大小显示。

需要注意的是，代码中的上传接口地址、文件格式和大小限制等参数都需要根据具体的业务需求进行修改。同时，还需要对上传的文件进行安全性和完整性检查，避免误删或者上传不完整的文件。