PHP项目上传Canvas生成图片随机命名 如何改为固定文件名？

现在默认用时间戳mktime()生成随机文件名，你可以按以下步骤修改为固定文件名，支持两种场景：全局完全固定同名、前端自定义指定文件名

一、前端JS代码修改 #

如果需要前端自定义文件名，你原有uploadEx函数的第二个参数isim可以直接复用，添加字段传给后端即可：

<script>
    function uploadEx(data, isim) {
        id = data;
        var canvas = document.getElementById('canvas'+id);
        var dataURL = canvas.toDataURL('image/png');
        document.getElementById('hidden_data').value = dataURL;
        var fd = new FormData(document.forms["form1"]);
        // 新增：把自定义文件名传给后端
        fd.append('custom_filename', isim);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload_data.php', true);

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                var percentComplete = (e.loaded / e.total) * 100;
                console.log(percentComplete + '% uploaded');
            }
        };

        xhr.onload = function() {

        };
        xhr.send(fd);
    };
</script>

调用的时候直接传你要的文件名即可，比如uploadEx(1, '销售报表2024')，最终文件就会存为销售报表2024.png

二、后端PHP代码修改 #

场景1：所有上传都用完全固定的文件名（新上传自动覆盖旧文件） #

直接把文件名写死即可，不需要改前端：

$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
// 直接写死固定文件名，比如canvas_table.png
$file = $upload_dir . "canvas_table.png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

场景2：使用前端传过来的自定义文件名 #

增加文件名安全过滤，避免路径遍历风险：

$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
// 接收前端传的文件名，过滤特殊字符防止安全问题，支持中英文、数字、下划线
$custom_name = isset($_POST['custom_filename']) ? preg_replace('/[^a-zA-Z0-9_\x{4e00}-\x{9fa5}]/u', '', $_POST['custom_filename']) : 'default_canvas';
$file = $upload_dir . $custom_name . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

内容的提问来源于stack exchange，提问作者Jagger