uniapp处理后台传输图片

本文主要介绍了在uniapp中如何处理后台传输的图片二进制流,包括头像照片的上传和修改。此外,还讲解了在uniapp中获取当前路由的方法,并详细阐述了如何利用图片和二维码生成海报的实现过程,涵盖下拉内容的处理技巧。
摘要由CSDN通过智能技术生成

1.uniapp处理图片二进制流

uni.request({
					url: "http://192.168.2.8:8080/common/download?name="+`${this.vuex_user.avatar}`,
					responseType:"ArrayBuffer",
					
					success: (res)=>{
						const imgsb = res.data;
						this.imgUrl = 'data:image/jpeg;base64,'+uni.arrayBufferToBase64(imgsb)
					}
				})

2.头像照片的上传和修改

//点击头像旁边小图标
			click(index) {
				//选择相机还是相册
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //这要注意,camera掉拍照,album是打开手机相册
					success: (res) => {
						console.log(res);
						this.imgUrl = res.tempFiles[0].path; //src需要的参数名字
						const tempFilePaths = res.tempFilePaths;
						//选择完照片去上传
						uni.uploadFile({
							url: 'http://192.168.2.8:8080/common/upload', //仅为示例,非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							//上传成功后将图片修改
							success: (uploadFileRes) => {
								//传递修改的数据需要是名称,而不是路径
								const urls = JSON.parse(uploadFileRes.data).data 
								const params = {
									avatar: urls
								}
								this.$u.api.changeUser(params).then(res => {
									console.log(res);
								})
							}
						});
					}
				})

			}

3.在uniapp中获取当前路由

let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
	let curRoute = routes[routes.length - 1].route // 获取当前页面路由,也就是最后一个打开的页面路由

 4.下拉内容

data() {
			return {
				show: false, //模态框的状态
				checked: false, //关闭渠道的状态
				content: "关闭后,用户将不能使用支付宝(1.1)进行充值!"
			}
		},
methods: {
			//点击switch开关选择器
			clickFn() {
				if (this.checked) {
					this.show = true;

				} else {
					uni.showToa
uniApp开发中,如果后端服务器返回的是视频数据,前端想要实现分片播放视频,通常会采用以下步骤: 1. **接收数据**:后端通过HTTP(如MIME类型 `video/mp4` 或 `application/octet-stream`)发送视频数据。前端可以使用uni-app提供的网络请求API(如`fetch`或`wx.request`),设置 responseType 为 'blob' 来接收二进制数据。 ```javascript uni.request({ url: 'your-endpoint-url', method: 'GET', responseType: 'blob', success(res) { let videoBlob = res.data; // 进行后续处理 } }) ``` 2. **文件切片**:由于浏览器一次只能加载一小部分数据,我们需要将大视频切成小块(分片)。这可以通过JavaScript的`ArrayBuffer`、`Uint8Array`等处理二进制数据的方式来进行。 3. **创建MediaSource和MediaSourceEngine**:创建一个`MediaSource`对象,并将其附加到`MediaSourceEngine`上,然后添加媒体段到`MediaSource`。 ```javascript let mediaSource = new MediaSource(); let mediaSourceEngine = mediaSource.createMediaSourceEngine(); mediaSourceEngine.addEventListener('sourceopen', () => { let segment = sliceVideoBlobIntoSegments(videoBlob); addSegmentToMediaSource(mediaSource, segment); }); ``` 4. **创建MediaElement和TextTrack**:创建HTML5的`<video>`元素,设置其源为MediaSource生成的URL,同时可能需要创建一个`TextTrack`用于字幕。 5. **播放分片**:设置`<video>`的`src`属性为`MediaSource`的URL并开始播放。当`sourceopen`事件触发,新视频数据就会自动播放。 6. **错误处理**:处理可能出现的数据中断、网络问题等,确保视频播放的连续性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值