.bind(this)作用

最新推荐文章于 2024-10-14 15:37:15 发布

原创最新推荐文章于 2024-10-14 15:37:15 发布 · 2.2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #html5

前端驿站专栏收录该内容

36 篇文章

订阅专栏

该博客介绍了如何在Vue.js应用中实现文件上传，并将文件转换为Base64编码发送到服务器。通过监听input事件获取文件，使用FileReader API读取文件内容，然后利用axios进行POST请求。注意在回调函数中使用.bind(this)来保持上下文，确保能正确访问this.img。

<script>
    let vue = new Vue({
        el: "#app",
        data: {
            img: ''
        },
        methods: {
            upload(e) {
                let file = e.target.files[0];
                // let s = URL.createObjectURL(file);
                // this.img = s;
                //获取文件扩展名
                let substr = file.name.substr(file.name.lastIndexOf(".") + 1);
                let fileReader = new FileReader();
                //读取文件,是一个异步操作
                fileReader.readAsDataURL(file)
                //回调函数
                fileReader.onloadend = function (e) {
                    let result = e.target.result;
                    this.img = result;
                    console.log(result);
                    let obj = {
                        base64: result,
                        ext: substr
                    }

                    axios.post(`stu/upload`, obj).then(response => {
                        console.log(response)
                    })
                        
                    //此处不写 .bind(this) 将无法获取this.img 获取上一级
                }.bind(this)

            }
        }
    })
</script>