if (item.nodeName === "IMG") {
if (item.alt === "") {
// 是图片
let base64Img = item.src;
// 删除base64图片的前缀
base64Img = base64Img.replace(/^data:image/w+;base64,/, "");
//随机文件名
let fileName = (new Date()).getTime() + ".jpeg";
//将base64转换成file
let imgFile = this.convertBase64UrlToImgFile(base64Img, fileName, 'image/jpeg');
let formData = new FormData();
// 此处的file与后台取值时的属性一样,append时需要添加文件名，否则一直时blob
formData.append('file', imgFile, fileName);
// 将图片上传至服务器
this.$api.fileManageAPI.baseFileUpload(formData).then((res) => {
const msgImgName = `/${res.fileName}/`;
// 消息发送: 发送图片
this.$socket.sendObj({
msg: msgImgName,
code: 0,
username: this.$store.state.username,
avatarSrc: this.$store.state.profilePicture,
userID: this.$store.state.userID
});
// 清空输入框中的内容
event.target.innerHTML = "";
});
} else {
msgText += `/${item.alt}/`;
}
} else {
// 获取text节点的值
if (item.nodeValue !== null) {
msgText += item.nodeValue;
}
}
}
// 消息发送: 发送文字，为空则不发送
if (msgText.trim().length > 0) {
this.$socket.sendObj({
msg: msgText,
code: 0,
username: this.$store.state.username,
avatarSrc: this.$store.state.profilePicture,
userID: this.$store.state.userID
});
// 清空输入框中的内容
event.target.innerHTML = "";
}
}
}
base64图片转flie
// base64转file
convertBase64UrlToImgFile: function (urlData, fileName, fileType) {
// 转换为byte
let bytes = window.atob(urlData);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Int8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// 转换成文件，添加文件的type，name，lastModifiedDate属性
let blob = new Blob([ab], {type: fileType});
blob.lastModifiedDate = new Date();
blob.name = fileName;
return blob;
}axios文件上传接口的封装（注意：需要设置"Content-Type":"multipart/form-data"}）
/*
* 文件管理接口
* */
import services from '../plugins/axios'
import base from './base'; // 导入接口域名列表
const fileManageAPI = {
// 单文件上传
baseFileUpload(file){
return services._axios.post(`${base.lkBaseURL}/uploads/singleFileUpload`,file,{headers:{"Content-Type":"multipart/form-data"}});
}
};
export default fileManageAPI;
解析websocket推送的消息
