图片上传，浏览器临时可预览图片

业务场景

在使用vant写图片上传的时候，需要做到图片预览

实现方法： 1、beforeRead可以获取到图片的file对象 2、将file对象转换为blob，生成临时链接或者base64

file转blob，生成临时链接

file转blob，生成临时链接：

• file:是before-read返回的file对象
• fileList：是文件预览绑定的参数

function fileToBlob(file, fileList) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = (e) => {
        let blob = new Blob([e.target.result], {
            type: file.type
        });
        console.log('blob:', blob);
        console.log('window.URL.createObjectURL(blob):', window.URL.createObjectURL(blob));
        fileList.push({
            url: window.URL.createObjectURL(blob),
            isImage: true
        })
    }
}

注意：Uploader 根据文件后缀来判断是否为图片文件，如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

file转base64

function fileToBase64(file, fileList) {
    return new Promise((resolve, reject) => {
        // 创建一个新的 FileReader 对象
        const reader = new FileReader();
        // 读取 File 对象
        reader.readAsDataURL(file);
        // 加载完成后
        reader.onload = function () {
            // 将读取的数据转换为 base64 编码的字符串
            const base64String = reader.result.split(",")[1];
            console.log('base64String:', base64String);
            fileList.push({
                url: base64String,
                isImage: true
            })
            // 解析为 Promise 对象，并返回 base64 编码的字符串
            resolve(base64String);
        };

        // 加载失败时
        reader.onerror = function () {
            reject(new Error("Failed to load file"));
        };
    });
}

注意：适合小图片

图片太大会报错：

Failed to load resource: the server responded with a status of 431 (Request Header Fields Too Large)