发送图片的几种方式（base64格式）

以下为在制作聊天室时遇到一些发送图片情况的解决办法，这里采用最简单的发送base64字符串的方式，当然你需要一个强劲的后端，千万别爆了。

使用浏览器选择文件并发送

以下代码产生的字符串包含“data:image/png;base64,”

// 选择文件函数
function selectAndConvertToBase64(callback) {
  // 创建一个<input>元素来选择文件
  const input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  // 当用户选择文件时
  input.onchange = (event) => {
    const file = event.target.files[0];
    // 创建一个FileReader来读取文件
    const reader = new FileReader();
    // 当文件加载完成时
    reader.onload = () => {
      // 将结果转换为Data URL并传递给回调函数
      const dataURL = reader.result;
      callback(dataURL);
    };
    // 读取文件并将其转换为Data URL
    reader.readAsDataURL(file);
  };
  // 触发选择文件操作
  input.click();
}

// 处理字符串函数
function sendBase64Photo() {
  selectAndConvertToBase64((base64String) => {
  // 发送base64字符串
    console.log(base64String);
    // 下面自行处理
  });
}

浏览器拖拽上传

以下代码产生的字符串不包含“data:image/png;base64,”，可模仿示例手动添加

// 设置需要监听的拖拽区域
const dropArea = document.getElementById('example');

// 阻止默认行为以便支持拖拽上传
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  dropArea.addEventListener(eventName, preventDefaults, false);
  document.body.addEventListener(eventName, preventDefaults, false);
});

// 处理拖拽上传事件
dropArea.addEventListener('drop', handleDrop, false);

// 防止浏览器默认事件
function preventDefaults (e) {
  e.preventDefault();
  e.stopPropagation();
}

// 处理拖拽上传事件
function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = dt.files;

  // 如果有文件，则处理上传
  if (files.length > 0) {
    handleFiles(files);
  } else {
    mdui.alert('暂不支持文件上传', '失败');
  }
}

// 处理上传文件
function handleFiles(files) {
  // 处理文件，转换成 base64 格式并返回
  const reader = new FileReader();
  reader.readAsDataURL(files[0]);
  reader.onload = function () {
    const base64String = reader.result.split(',')[1];
    console.log('data:image/png;base64,' + base64String);
    // 下面自行处理
  };
}