js模拟出input上传文件

本篇基于eleui+vue
实现效果，点击右侧按钮上传图片，然后将文件名放入input，如下图：

按钮单击事件，其中需要注意this的指向性

selectFiles(){
    const _this=this;
    let fileType="image/*";//文件类型 TODO
    const input=document.createElement("input");
    input.setAttribute("type","file");
    input.setAttribute("accept",fileType);
    input.setAttribute("name","fujian");
    input.click();
    input.onchange=function (){
    	let formData=new FormData();
        formData.append("Attachments",this.files);
        _this.fileName=this.files[0].name;
        //TODO 这里写文件上传接口
    };
    input.remove();
},

组件代码

<el-input clearable v-model="fileName" :disabled="true" placeholder="点击右侧按钮上传附件">
    <template slot="prepend">附件</template>
    <el-button slot="append" icon="el-icon-thumb" @click="selectFiles"></el-button>
</el-input>