【零碎知识点】- 预览图片

最新推荐文章于 2024-10-02 05:39:15 发布

宇豪学习录

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量103

点赞数

文章标签： javascript 前端 vue.js typescript

本文链接：https://blog.csdn.net/weixin_44273311/article/details/129055941

版权

原理

在图片上传之前，获取到图片本地并在Web页面进行展示以达到预览到效果。

PS: 生成的图片地址是临时的，下次上传相同图片，该地址会改变。

伪代码

// 获取上传图片的本地地址
  function imgHandler(fileInfo: File){
    const file = fileInfo //本地图片文件
    let url;
    if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    } else if (window.FileReader) {
        const reader = new FileReader();
        if (file && file.type.match('image.*')) {
            reader.readAsDataURL(file);
            reader.onloadend = function (e) {
                url = reader.result;
            };
        };
    };
    // blob:http://localhost:3000/13519eaf-24a7-4b24-8151-f48317775000
    return url;
  };