两种图像预览方式

最新推荐文章于 2022-06-04 22:05:03 发布

一枚小蜗牛H

最新推荐文章于 2022-06-04 22:05:03 发布

阅读量109

点赞数

分类专栏：前端驿站编程技巧

本文链接：https://blog.csdn.net/Ying_ph/article/details/115529772

版权

前端驿站同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

编程技巧

18 篇文章 2 订阅

订阅专栏

两种图像预览方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<div id="app">
    <img :src="ImgUpload" alt="" ref="image" height="100px" width="100px"/>
    <input type="file" @change="Upload">

    <img :src="ImgUpload2" alt="" ref="image" height="100px" width="100px"/>
    <input type="file" @change="Upload2">
</div>
<script src="./myjs/vue.js"></script>
<script src="./myjs/axios.min.js"></script>
<script>
    let vue = new Vue({
        el: '#app',
        data: {
            ImgUpload: '',
            ImgUpload2: ''
        },
        methods: {
            Upload(e) {
                //通过base64预览
                let file = e.target.files[0]
                let fileReader = new FileReader();
                //读取文件,是一个异步操作
                fileReader.readAsDataURL(file)
                //回调函数,表示已经读后
                fileReader.onloadend = function (e) {
                    let base64 = e.target.result;
                    //此方案可以动态设置src属性
                    this.ImgUpload = base64;
                    //此方案可以动态设置src属性
                    //this.$refs.image.src=base64;
                }.bind(this)
            },

            Upload2(e) {
                //第二种预览方式
                let file = e.target.files[0]
                let s = URL.createObjectURL(file);
                this.ImgUpload2 = s;
            }
        }


    })

</script>
</body>
</html>

一枚小蜗牛H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种图像预览方式

两种图像预览方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文件上传</title></head><body><div id="app"> <img :src="ImgUpload" alt="" ref="image" height="100px" width="
复制链接

扫一扫

专栏目录