vue中通过input元素标签上传图片，两种方式(vue中操作dom)

vue中操作DOM元素

这篇文章主要说明的是如何在vue中操作DOM元素，以input标签为例，这里通过两种办法读取上传的图片或文件。

一、在mounted事件中使用getElementById来获取(不推荐)

这与vue组件的生命周期相关，vue会在mounted时挂载dom，只有在这一步之后才能通过getElementById获取dom节点，如果获取不到需要加延迟或$nextTick方发，具体百度，代码如下

<template>
    <div class="change_info_main">
        <input id="up_avatar" type="file" />
    </div>
</template>

<script>
export default {
    name: "ChangePersonInfo",
    data() {
        return {};
    },

    mounted() {
        const avatar = document.getElementById("up_avatar");
        avatar.onchange = function () {
            const file = this.files;
            const reader = new FileReader();
            reader.readAsBinaryString(file[0]);
            reader.onload = function () {
                console.log(reader.result);
            };
        };
    },
};
</script>

二、通过绑定ref来获取节点(推荐，开销较小)

通过这种形式，我们也可以获取dom节点，通过绑定ref来操作节点，会比用getElementById占用更少的性能，前提也是在mounted时，虚拟节点转换为真实节点被挂载到页面上，可以在dom直接绑定触发事件，不用再次设置延时等，（此时也可以使用getElementById来获取）具体代码如下

<template>
    <div class="change_info_main">
        <input id="up_avatar" ref="up_avatar" type="file" @change="uploadAvatar" />
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "ChangePersonInfo",
    data() {
        return {};
    },

    methods: {
        uploadAvatar() {
        	// const avatar = document.getElementById('up_avatar'); 也是可以，因为此时dom已被渲染
            const avatar = this.$refs.up_avatar;
            const files = avatar.files;
            const reader = new FileReader();
            reader.readAsBinaryString(files[0]);
            reader.onload = function () {
                console.log(reader.result);
            };
        },
    },
};
</script>