HTML
<el-form-item label="附件"> <div @click="triggerAffix" class="fujian"></div> <div class="affix-success">附件<span class="btn-del"></span></div> <input id="affix" @change="uploadAffix($event)" type="file"> </el-form-item>
JS
triggerAffix: function () { $('#affix').click() }, uploadAffix: function(ev) { var file = ev.target.files[0] if (file == undefined) { return } var reader = new FileReader() var img = new Image() reader.onload = function (e) { img.src = e.target.result document.body.appendChild(img) console.log(e.target.result) } reader.readAsDataURL(file) }
因为要兼容IE,点击事件目前不支持Vue中触发file点击事件,目前使用jQuery处理
this.$refs.affix.dispatchEvent(new MouseEvent('click'))