uniapp图片地址以文件流的形式传给后端

安装image-tools 图像转换工具,可用于图像和base64的转换

点我前往

安装
npm i image-tools --save
引用
import { pathToBase64, base64ToPath } from ‘image-tools’

具体代码

			let id = 1
			this.downloadFiles(id);
			// 1 通过id获取服务器图片 
			async downloadFiles(id) {
				//2 获取的图片长这样 123456.png
				let result = await downloadFile(id); 
				//3 图片加上服务器地址
				let url = this.requestUrl(API前缀) + result.url;
				//4 将图片先转换成base64格式
				pathToBase64(url)
					.then(base64 => {
						// console.log(base64)
						let fileStream = this.base64toFile(base64, '签名')
						console.log(fileStream)
						//6 把文件流传给后端
						this.uploadFile(this.requestUrl, fileStream)
					})
					.catch(error => {
						console.error(error)
					})
			},
			//5 然后再把base64转成文件流
			base64toFile(dataurl, filename = 'file') {
				let arr = dataurl.split(',')
				let mime = arr[0].match(/:(.*?);/)[1]
				let suffix = mime.split('/')[1]
				let bstr = atob(arr[1])
				let n = bstr.length
				let u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new File([u8arr], `${filename}.${suffix}`, {
					type: mime
				})
			},
			//请求后端接口
			uploadFile(requestUrl, file) {
				console.log(file)
				console.log('进来了')
				uni.uploadFile({
					url: requestUrl + 'a/b/c', //服务器地址
					file: file,
					name: 'cfName',
					header: {
						'authorization': uni.getStorageSync("user_token")
					},
					success: (uploadFileRes) => {
						console.log('uploadFileRes')
						console.log(uploadFileRes)
					},
					fail:(res) => {
						console.log(res)
					}
				});

			},
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
如果UniApp的WebSocket的header无法直接后端,你可以考虑使用自定义的方式将Token递给后端。以下是一种解决方案: 1. 在创建WebSocket连接时,将Token作为查询参数附加在WebSocket连接地址的末尾。 示例代码如下: ```javascript // 在需要使用WebSocket的页面或组件中 // 获取Token let token = uni.getStorageSync('token'); // 创建WebSocket连接 let socket = uni.connectSocket({ url: 'ws://your-websocket-url?token=' + token, success() { console.log('WebSocket连接成功'); }, fail() { console.log('WebSocket连接失败'); } }); // 其他监听事件... ``` 在上述代码中,将Token作为查询参数附加在WebSocket连接地址的末尾,通过`?token=`的方式递。 2. 在服务端接收到WebSocket连接请求后,解析查询参数中的Token,并进行验证。 示例代码如下(Node.js): ```javascript const WebSocket = require('ws'); const url = require('url'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', function connection(ws, req) { const query = url.parse(req.url, true).query; const token = query.token; // 验证Token的逻辑 if (token === 'your-token') { // Token验证通过,继续处理WebSocket连接 console.log('WebSocket连接成功'); } else { // Token验证失败,关闭WebSocket连接 ws.terminate(); console.log('WebSocket连接失败'); } // 其他处理逻辑... }); ``` 在上述代码中,通过解析查询参数中的Token进行验证。如果Token验证通过,则继续处理WebSocket连接;如果Token验证失败,则关闭WebSocket连接。 这种方式可以在UniApp递Token给后端进行验证,但需要在服务端进行相应的解析和验证逻辑。注意,这里的示例代码仅供参考,实际的实现方式可能会因具体的后端框架而有所差异。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值