vue2中关于elementUI的自定义上传

在Vue 2中使用Element UI时，可以通过自定义上传组件来实现。以下是一个简单的自定义上传组件的例子：

<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"
    :file-list="fileList"
    list-type="text">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></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.error('Error:', err, file, fileList);
    }
  }
};
</script>

在这个例子中，我们使用了<el-upload>组件，并通过action属性指定了文件上传的API地址。你可以根据实际情况修改这个地址。handlePreview、handleRemove、beforeRemove、handleSuccess和handleError方法分别处理预览、移除文件、移除前的确认、上传成功和上传失败的情况。

请确保你已经安装了Element UI并在你的Vue项目中正确引入了Element UI。