将获取的flie图片显示到页面

需求描述

需要上传图片至后端，并且需要前端将上传的图片显示出来，且后端并不会返回上传的图片的路径

实现方式

FlieReader对象获取图片的base64位数据显示图片

• 原理：FlieReader对象允许Web应用程序异步读取存储在用户计算机上的文件；通过设置FlieReader实例对象的onload事件获取使用readAsDataURL读取的文件信息（返回data：URL格式的Base64字符串），来显示图片，代码如下：

<template>
    <div>
        <input type = "flie" @change = "uploadImg">
        <img :src = "base64Url" />
    </div>
</template>

export default {
    data(){
        return {
            base64Url : ""
        }
    },
    methods:{
        uploadImg(event){
            let flie = event.target.files[0];
            // 这里可以做一些校验
            let flieReader = new FlieReader();
            flieReader.onload = (evt=>{
                this.base64Url = evt.target.result;
            })
            flieReader.readAsDataURL(flie)
        }
    }
}

通过URL对象的createObjectURL创建一个新的URL对象显示

• URL.createObjectURL( )静态方法会创建一个DOMString，其中包含一个表示参数中给出的对象URL,代码如下

<template>
    <div>
        <input type = "flie" @change = "uploadImg">
        <img :src = "imgUrl" />
    </div>
</template>

export default {
    data(){
        return {
            imgUrl: ""
        }
    },
    methods:{
        uploadImg(event){
            let flie = event.target.files[0];
            // 这里可以做一些校验
            this.imgUrl = window.URL.createObjectURL(flie);
        }
    }
}

附上以上使用的两种方式的API地址

FlieReader

createObjectURL