elementui el-upload 上传文件

在Element UI中使用el-upload组件实现文件上传功能时，你可以通过设置action属性来指定上传的API地址，并通过on-success和on-error回调来处理上传成功或失败的情况。以下是一个简单的例子：

<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"
    :limit="3"
    :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</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 uploading file:', err);
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

在这个例子中，action属性设置为一个POST请求的URL，你需要替换为你的服务器接收文件的API地址。on-success和on-error分别处理文件上传成功和失败的情况。submitUpload方法用于手动触发文件上传。

确保后端API能够处理上传的文件并返回适当的响应。如果需要，可以添加更多的属性和方法来实现更复杂的上传功能，例如并发上传、文件列表展示、文件过滤等。