element el-upload 读取本地 txt 内容

今天想直接在浏览器端读取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);
                }

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

最后运行结果是这样的