用element 实现文件上传

要使用 Element 实现文件上传，需要使用其提供的 el-upload 组件。以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :on-error="handleError"
    :before-upload="handleBeforeUpload"
    :auto-upload="false"
    :file-list="fileList">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button 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: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleError(error, file, fileList) {
      console.log(error, file, fileList);
    },
    handleBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}
</script>

在以上示例中，el-upload 组件提供了多个属性来控制文件上传的行为，例如：

- `action`：文件上传的地址；
- `on-success`：文件上传成功后的回调函数；
- `on-error`：文件上传失败后的回调函数；
- `before-upload`：文件上传前的校验函数；
- `auto-upload`：是否自动上传文件；
- `file-list`：已上传的文件列表。

此外，el-upload 还可以通过插槽来自定义上传按钮和提示信息。在示例中，我们使用了两个插槽：

- `trigger`：用来自定义上传按钮；
- `tip`：用来自定义上传提示信息。

以上是一个简单的 Element 文件上传示例，你可以根据自己的需求进行修改和扩展。