1、使用input的file选择器获取图片,accept是移动端写法,不加image在移动端无法调起
<input type="file" ref="img" accept="image/jpeg,image/png" @change="getFile($event)"/>
<img :src="objectURL" />
2、发送
methods: {
getFile (e) {
var taht = this
var str = e.target
console.log(str)
// taht.$conn 初始化
var id = taht.$conn.getUniqueId(); // 生成本地消息id
var msg = new WebIM.message('img', id); // 创建图片消息
var input = document.getElementById('image'); // 选择图片的input
var file = WebIM.utils.getFileUrl(str); // 将图片转化为二进制文件
console.log(file.url)
var allowType = {
'jpg': true,
'gif': true,
'png': true,
'bmp': true
};
if (file.filetype.toLowerCase() in allowType) {
var option = {
apiUrl: WebIM.config.apiURL,
file: file,
ext: {
file_length: file.data.size // 文件大小(有没有都不影响)
},
to: '发送对象的id', // 接收消息对象
roomType: false,
onFileUploadError: function () { // 消息上传失败
console.log('上传失败');
},
onFileUploadComplete: function () { // 消息上传成功
console.log('上传成功');
},
success: function () { // 消息发送成功
console.log('发送成功');
},
flashUpload: WebIM.flashUpload
};
msg.set(option);
taht.$conn.send(msg.body);
}
},
}
3、接收
mounted () {
let taht = this
taht.$conn.listen({
onPictureMessage: function (message) { //收到图片消息
// console.log("Location of Picture is ", message);
console.log(JSON.stringify(message));
var options = {
url: message.url
};
options.onFileDownloadComplete = function(data) {
//图片下载成功,需要将data转换成blob,使用objectURL作为img标签的src即可。
var objectURL = WebIM.utils.parseDownloadResponse.call(taht.$conn, data);
console.log(objectURL)
}
options.onFileDownloadError = function() {
// 图片下载失败
console.log('下载失败');
};
WebIM.utils.download.call(taht.$conn, options);
msgShow('receiver', 'img', options.url);
pushMessageToJson("receiver", "img", options.url);
},
})
}