js通过POST请求服务器文件,得到字节流并实现预览

// 附件base64解析
		analyse64: function(attName, attType){
			if(attType===1) { // 图像预览
				this.loading_show = true;
				this.blobURL = '';
				let formData = new FormData();
				let config = {
					headers: {'Content-Type': 'multipart/form-data',
						"Authorization": this.$sessionAuth()}};
				formData.append('fileName', attName);
				formData.append('filePath', "emp_profile");
				this.uploadAxios.post(this.base64Url, formData,config)
				.then((result)=>{
					let file64 = result.data.extraData;
					for (let i in file64) {
						console.log(file64[i]);
						this.base64 = file64[i];
					}
					this.preview_show = true;
					this.loading_show = false;
				});
			}else if(attType===4) { // 视频预览
				this.base64 = '';
				let formData = new FormData();
				let config = {
					headers: {'Content-Type': 'multipart/form-data',
						"Authorization": this.$sessionAuth()},
					responseType: "blob"
				};
				formData.append('fileName', attName);
				formData.append('path', "emp_profile");
				this.uploadAxios.post(this.getVideoUrl, formData,config)
					.then((response)=>{
						let blob = new Blob([response.data],{type:"video/mp4"});
						this.blobURL = window.URL.createObjectURL(blob);
						this.preview_show = true;
					});
			}else{
				return this.$vToast('该附件暂不支持手机端预览!')
			}
		},
		touchSwitch:function(){
			let layer = document.getElementById('topLayer');
			let startX,startY,moveEndX,moveEndY,X,Y;
			layer.addEventListener("touchstart",(event => {
				startX = event.targetTouches[0].pageX;
				startY = event.targetTouches[0].pageY;
			}))
			layer.addEventListener("touchend",(event => {
				moveEndX = event.changedTouches[0].pageX;
				moveEndY = event.changedTouches[0].pageY;
				X = moveEndX-startX;
				Y = moveEndY-startY;
				if(X > 30) this.prevPreview(); // 右划
				if(X < -30) this.nextPreview(); // 左划
			}))
		},
		/*上一张*/
		prevPreview:function(){
			if(this.attachIndex<=0) return;
			let att = this.attachs[this.attachIndex-1];
			this.attachIndex--;
			this.analyse64(att.Name,att.Type);
		},
		/*下一张*/
		nextPreview:function(){
			if(this.attachIndex >= this.attachs.length-1) return;
			let att = this.attachs[this.attachIndex+1];
			this.attachIndex++;
			this.analyse64(att.Name,att.Type)
		},
		/*关闭预览*/
		clsPreview:function(){
			this.preview_show=false;
			this.base64=''; //退出预览清除base64
			this.blobURL=''; //退出预览清除blob
			window.event.stopPropagation(); // 阻止冒泡传播, 防止点击A事件结果触发B事件的蝴蝶效应
		},

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值