本文共 2857 字，大约阅读时间需要 9 分钟。

[ انتقال至:https://www.cnblogs.com/-mrl/p/8709843.html ]

图片上传处理方案（基于 PHP 且支持 base64 和 blob格式）

本文将详细介绍一个图片上传处理方案，该方案基于 PHP 并结合 jQuery 实现，支持两种图片上传格式：base64 数据流 和 Blob 数据流。此外，该方案还支持图片的上传、存储与检索等功能。

图片上传处理的技术实现

本方案的主要目标是实现图片的上传功能，结合两种不同的图片上传格式（base64 数据流 和 Blob 数据流），并在服务器端对图片进行存储，最后返回图片的访问地址。

1. 系统功能说明

• 图片上传类型检测：根据用户上传时指定的 stream_type 参数，判断图片是以 base64 数据流 还是 Blob 数据流 的形式进行上传。
• 图片数据解码：
  • base64 数据流：通过 base64_to_blob 函数对 uploaded 的 base64 数据进行解码，返回 decode 后的二进制 blob 数据。
  • Blob 数据流：直接将 uploaded 的 Blob 数据进行 base64 编码，并将其作为图片数据处理。
• 图片存储与校验：对解码后的图片数据进行存储，同时进行图片校验（如图片损坏、格式不正确等），若校验失败则返回相应的错误信息。
• 返回图片访问地址：在图片上传与存储成功后，返回图片的访问地址和相关信息。

技术实现细节

1. base64 数据流处理

对于 base64 数据流 的上传，服务器端需要：

2. Blob 数据流处理

对于 Blob 数据流 的上传，服务器端的处理逻辑相对简单：

前端实现

1. 文件选择与上传

前端 [{""}] 用于文件选择，配合 FileReader 组件实现文件读取。核心代码如下：

const input = document.getElementById("imgfile");
if (typeof FileReader === 'undefined') {
    alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
    input.disabled = 'disabled';
} else {
    input.addEventListener('change', readFile, false);
}
function readFile() {
    const file = this.files[0];
    if (!/image\/*/.test(file.type)) {
        alert("只能选择图片");
        return false;
    }
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        const base64Code = e.target.result;
        $('#showImg').attr('src', base64Code);
        console.log(base64Code);
        $.ajax({
            type: 'POST',
            url: '?upload=img&stream_type=base64',
            data: { stream: base64Code },
            datatype: 'json',
            beforeSend: function () {
                $('#msg').html('logining');
            },
            success: function (data) {
                alert(data);
                $('#msg').html(decodeURI(data));
            },
            complete: function () {
                // HideLoading();
            },
            error: function () {
                alert('请求出错处理');
            }
        });
    };
}

2. AJAX 请求

前端 发送 POST 请求，传输图片数据，服务器端按照指定的数据流类型进行处理。通过 stream_type 参数判断是处理 base64 数据流 还是 Blob 数据流，并根据要求返回相应的图片地址。

服务器端处理逻辑

1. base64 数据流

• 解码检查：对 base64 数据进行解码和校验。
• 存储与返回：将解码后的图片数据存储到服务器，并返回图片的访问地址。

2. Blob 数据流

• base64 编码：将 Blob 数据转换为 base64 字符串。
• 存储与返回：验证 base64 数据的有效性，存储后返回图片的访问地址。

优势与特点

总结

本方案通过 PHP 和 jQuery 实现了图片的上传与存储功能，支持 base64 数据流 和 Blob 数据流 两种上传方式。服务器端对图片数据进行解码与校验，前端通过 AJAX 实现了文件读取与提交。该方案简单易实现，适用于需要在线图片上传的场景，例如用户个人资料图片上传、商品图片上传等。

如对本方案有疑问或需要进一步改进，请随时联系作者。