element upload 只上传单个文件，并覆盖，获取文件的文本内容

element upload 只上传单个文件，并覆盖，获取文件的文本内容

vue-running 在线运行地址

<template>
  <el-upload
    ref="upload-text"
    class="upload-demo"
    drag
    action=""
    :auto-upload="false"
    :on-change="handleChange"
    :http-request="uploadHandler"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      将文件拖到此处，或
      <em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">
      上传文件，且不超过500kb
    </div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleChange(file, fileList) {
      if (file.size > 1024 * 500) {
        fileList.pop();
        this.$message({
          message: "单个文件不超过500k!",
          type: "error"
        });
      }
      if (file.status === "ready") {
        // 已上传文件列表如果存在 2 条记录，移除第一条，实现替换效果
        if (fileList.length === 2) {
          fileList.shift();
        }
      }
      this.$refs["upload-text"].submit();
    },
    uploadHandler(params) {
      this.readText(params);
    },
    async readText(params) {
      // UTF-8,GBK,GB2312
      const readFile = new FileReader();
      readFile.onload = e => {
        console.log("e.target.result", e.target.result);
      };
      readFile.readAsText(params.file);
    }
  },
  mounted() {}
};
</script>

其他文章——element upload 只传一张图片样式,和表单一起提交