PHP 图片上传教程：Axios 前端和后端代码示例

使用 Axios 和 PHP 实现图片上传

本教程将介绍如何使用 Axios 和 PHP 实现图片上传功能。

前端 JavaScript 代码

// 请求头部信息
let config = {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
};
// 获取图片文件
let file = document.getElementById('file');
// 使用 FormData 将文件添加到表单中
let formData = new FormData();
formData.append('file', file.files[0]);
// 使用 Axios 发起上传请求
axios.post('/upload.php', formData, config).then(response => {
    console.log(response);
}).catch(error => {
    console.log(error);
});

后端 PHP 代码

<?php
// 指定文件上传存放的路径
$targetDir = 'uploads/';
// 获取上传文件
$fileName = $_FILES['file']['name'];
// 重新定义上传文件路径
$targetFilePath = $targetDir . $fileName;
// 检测上传文件是否存在
if (file_exists($targetFilePath)) {
    // 如果文件已存在，返回错误
    http_response_code(400);
    echo json_encode(['message' => '文件已存在']);
    exit();
}
// 将上传文件移动到指定路径
if (move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)) {
    // 上传成功，返回成功信息
    http_response_code(200);
    echo json_encode(['message' => '文件上传成功']);
    exit();
} else {
    // 上传失败，返回失败信息
    http_response_code(400);
    echo json_encode(['message' => '文件上传失败']);
    exit();
}

代码说明:

前端代码:
- 使用 FormData 对象将文件添加到表单中，方便发送上传请求。
- 设置 Content-Type 为 multipart/form-data，表明上传的是二进制文件。
- 使用 axios.post() 发送上传请求到 /upload.php 路径。
后端代码:
- 获取上传文件的名称和临时文件路径。
- 检查文件是否已存在，如果存在返回错误信息。
- 使用 move_uploaded_file() 函数将上传文件移动到指定路径。
- 根据上传结果返回不同的状态码和消息。

注意:

请确保 uploads 目录存在，且 PHP 进程具有该目录的写入权限。
可以根据实际需求修改代码，例如添加文件类型验证、文件大小限制等功能。

希望本教程对您有所帮助！