readAsText 读取本地文件

最新推荐文章于 2025-02-13 10:57:22 发布

茶荼

最新推荐文章于 2025-02-13 10:57:22 发布

阅读量5.1k

点赞数 1

分类专栏： vue 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/qq_34414994/article/details/121516049

版权

vue 专栏收录该内容

25 篇文章

订阅专栏

这个示例展示了如何在Vue中创建一个文件上传组件，通过`el-upload`实现文件上传功能，包括设置上传地址、监听文件变化、限制上传数量（3个）以及处理超出限制的文件。当文件发生变化时，会读取文件内容并显示在控制台。对于不支持文件读取的浏览器，给出提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-upload class="upload-demo"
                       action="#"
                       :on-change="handleChange"
                       :file-list="fileList"
                       :limit="3"
                       :on-exceed="handleExceed">
              <el-button size="small"
                         type="primary">上传文件</el-button>
            </el-upload>

handleChange (file) {
      let reader = new FileReader();
      if (typeof FileReader === "undefined") {
        this.$message({
          type: "info",
          message: "您的浏览器不支持文件读取。"
        });
        return;
      }
      reader.readAsText(file.raw, "utf-8");
      var _this = this;
      reader.onload = function (e) {
        _this.textInfo = e.target.result;
        console.log('textInfo', _this.textInfo)
      };
    },