element ui 读取upload上传文件并显示

在vscode插件 webview中读取文件并显示

<div id="hostAdd" class="content">
    <div class="content-inner content600 newhost">
        <div class="content-title align-center">新建目标机</div>
        <div class="content-sec">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="目标机名称：">
                  <el-input v-model="form.hostname"></el-input>
                </el-form-item>
                <el-form-item label="IP：">
                  <el-input v-model="form.ip"></el-input>
                </el-form-item>
                <el-form-item label="Password:">
                  <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="Public key:">
                  <el-upload class="upload-demo" action="#" :file-list="fileList" :on-change="handleChange" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                    <el-input type="textarea" ref="text" id="text" :rows="8" placeholder="" v-model="form.key"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button  @click="onCreated()">创建</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</div>
<script>
    // 初始化vscode插件api
    // var vscode = acquireVsCodeApi();

    window.addEventListener('message', function (e) {
        console.log('e.data: ', e.data);
        if (e.data.id === "hostlistCreatedData") {
            console.log('目标机传回的data2:', e.text);
        }
    })

    new Vue(
        {
            el: '#hostAdd',
            data: function () {
                return {
                    form: {
                        hostname: '',
                        ip: '',
                        password: '',
                        key: ''
                    },
                    fileList:[],
                }
            },
            created() {
                this.form.hostname = "initial name";
            },
            methods: {
                onCreated() {
                        let formData= this.form;
                        vscode.postMessage({
                                id: "hostlistCreated",
                                text: formData
                        })
                    },

                    handleChange(file, fileList){
                          if(fileList.length>0) {
                            // this.fileList = [fileList[fileList.length-1]];
                            this.fileList = [fileList[fileList.length-1]]
                          }
                          let _this = this;
                          if (file.raw) { 
                            console.log("file raw: ", file.raw);
                            let reader = new FileReader(); //新建一个FileReader
                            reader.readAsText(file.raw, "UTF-8"); //读取文件
                            reader.onload = function (evt) { //读取完文件之后会回来这里
                              let fileString = evt.target.result; // 读取文件内容
                              _this.form.key = fileString; //赋值给textarea
                            }
                          }
                    },
            },
        })
</script>

最后

以上就是缓慢世界为你收集整理的element ui 读取upload上传文件并显示的全部内容，希望文章能够帮你解决element ui 读取upload上传文件并显示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。