以下为在制作聊天室时遇到一些发送图片情况的解决办法,这里采用最简单的发送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);
// 下面自行处理
};
}