elementui-upload组件自定义样式上传(upload中常用的属性，但是网络上却找不到教程)(解决bug删除之后再次上传会上传删除的图片)专注后端工程师的前端速成

在Element UI中，el-upload组件提供了丰富的属性来自定义上传样式。以下是一些在网络上可能找不到的常用属性：

1. action: 上传的地址，必填。
2. headers: 设置上传的请求头部。
3. multiple: 是否允许多文件上传。
4. data: 上传时附带的额外参数。
5. name: 上传文件时的参数名。
6. with-credentials: 是否携带cookie。
7. show-file-list: 是否显示文件列表。
8. drag: 是否允许拖拽上传。
9. before-upload: 上传文件之前的钩子，返回 false 或者 Promise 可以阻止文件上传。
10. on-success: 文件上传成功时的钩子。
11. on-error: 文件上传失败时的钩子。
12. on-progress: 文件上传时的进度钩子。
13. on-remove: 文件列表移除文件时的钩子。
14. on-preview: 文件列表点击预览文件时的钩子。

以下是一个使用el-upload组件的基本示例，包含了一些常用属性：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :multiple="true"
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    >
    <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 {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log('Preview:', file);
    },
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      console.log('Success:', response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log('Error:', err, file, fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 ${this.limit} 个文件！`);
    }
  }
};
</script>

在这个示例中，我们定义了一个带有预览、移除和上传成功/失败等功能的上传组件。你可以根据自己的需求，调整action、事件处理函数和上传参数等属性。