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); }, }) }