el-upload上传基本使用方法整理 elementUI

在使用Element UI的el-upload组件进行文件上传时，可以通过以下方式进行基本的配置和使用：

1. 在模板中添加el-upload组件，并设置必要的属性，如action（上传的地址）、multiple（是否支持多文件上传）等。
2. 在脚本中绑定文件上传之前（before-upload）和上传成功（on-success）的钩子函数，以便进行一些自定义逻辑处理。

下面是一个简单的例子：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/" <!-- 这里替换为你的上传API地址 -->
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    list-type="text">
    <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) {
      // 文件预览逻辑
    },
    handleRemove(file, fileList) {
      // 文件移除逻辑
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功后的逻辑
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      // 文件上传失败后的逻辑
      console.error('Error during upload:', err);
    }
  }
};
</script>

在这个例子中，我们配置了一个简单的文件上传组件，包括了基本的上传地址、文件列表等。同时，我们定义了几个方法来处理文件的预览、移除、成功上传和上传失败的情况。这些方法可以根据实际需求进行相应的逻辑编辑和扩展。