前端获取本地图片，传到后端，存入数据库

前端获取本地图片的方式有多种，比如使用`<input type="file">`标签或者拖拽上传等方式。不过无论使用哪种方式，最终都需要将图片数据传到后端进行处理。

以下是一个基于 jQuery 的示例代码，演示了如何使用 Ajax 将图片数据发送到后端 PHP 脚本：

HTML：

<input type="file" id="file-input">
<button id="upload-btn">上传图片</button>

JavaScript：

// 监听文件选择事件
$('#file-input').on('change', function() {
  // 获取选中的文件
  var file = this.files[0];
  // 创建 FileReader 对象
  var reader = new FileReader();
  // 读取文件数据
  reader.readAsDataURL(file);
  // 当文件读取完成时
  reader.onload = function() {
    // 显示预览图
    $('#preview').attr('src', reader.result);
  }
});

// 监听上传按钮点击事件
$('#upload-btn').on('click', function() {
  // 获取图片数据
  var imageData = $('#preview').attr('src');
  // 发送数据到后端 PHP 脚本
  $.ajax({
    url: 'upload.php',
    method: 'POST',
    data: {
      image: imageData
    },
    success: function(response) {
      // 处理上传成功后的逻辑
      console.log('上传成功：' + response);
    },
    error: function() {
      // 处理上传失败后的逻辑
      console.log('上传失败');
    }
  });
});

后端 PHP 脚本：

<?php
// 获取图片数据
$imageData = $_POST['image'];
// 将图片数据解码为二进制数据
$imageData = base64_decode(str_replace('data:image/png;base64,', '', $imageData));
// 生成文件名
$filename = uniqid() . '.png';
// 存储图片文件
file_put_contents($filename, $imageData);
// 存储文件信息到数据库
// ...
// 返回上传成功的响应
echo '上传成功';
?>

上面的示例代码仅供参考，具体实现可以根据实际需求进行调整。