vue 环信im 发送图片、接收图片

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);
        }, 
	})
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值