element el-upload 读取本地 txt 内容

最新推荐文章于 2024-01-02 15:04:13 发布

Syspan

最新推荐文章于 2024-01-02 15:04:13 发布

阅读量4.2k

点赞数 2

分类专栏： html 文章标签： js vue web

本文链接：https://blog.csdn.net/qq_40729514/article/details/109677411

版权

FileReader txt文件浏览器上传服务器端手动上传

关键词由CSDN通过智能技术生成

html 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

今天想直接在浏览器端读取txt 的内容然后将读取到的文本内容上传到服务器端。下面是整个读取过程的demo 仅供参考

<el-upload class="upload-demo" :auto-upload="false" :on-change="openFile">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传txt文件，且不超过500kb</div>
                        </el-upload>

这里我们要将 :auto-upload="false" 设置成false 不然会自动上传到服务器端

接下来就是读取代码的实现，其实也很简单，如下：

openFile(file) {
                    var reader = new FileReader();
                    reader.onload = function () {
                        if (reader.result) {
                            //打印文件内容
                            console.log(reader.result);
                        }
                    };
                    reader.readAsText(file.raw);
                }

这里我粘一下代码的截图（不重要的地方我已经折叠起来了）