【前端相关】elementui使用el-upload组件实现自定义上传

在Element UI中，您可以使用el-upload组件来实现自定义的文件上传功能。以下是一个简单的例子，展示了如何使用el-upload组件来上传文件：

<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    // 预览文件的方法
    handlePreview(file) {
      console.log('Preview:', file);
    },
    // 移除文件的方法
    handleRemove(file, fileList) {
      console.log('Remove:', file, fileList);
    },
    // 移除文件之前的钩子，返回 false 或 Promise 可停止移除
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件上传成功的钩子
    handleSuccess(response, file, fileList) {
      console.log('Success:', response, file, fileList);
    },
    // 文件上传失败的钩子
    handleError(err, file, fileList) {
      console.error('Error:', err, file, fileList);
    }
  }
};
</script>

在这个例子中，我们使用了el-upload组件的一些基本属性和方法，例如action属性用于设置文件上传的服务器地址，以及各种钩子方法如on-preview、on-remove、before-remove、on-success和on-error等，用于处理文件的预览、移除、成功上传和上传失败等情况。

请根据您的实际需求调整action属性以指向正确的上传API，以及实现相应的方法来处理文件上传后的响应。