文件上传web端和uinapp之间的相互转化

文章讲述了在web端使用FormData和axios上传文件至minio集群的步骤,以及在uni-app中如何利用uni.uploadFile或基于axios的封装进行文件上传。同时提到了上传过程中的参数如path和token的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

web端

web端文件上传最原始的方法,就是创建FormData对象,在创建的对象里添加属性以及要上传的文件,可以直接使用axios进行上传,上传到后端的minio集群里(个例)。

          let fileData = new FormData();
          fileData.append('file', file);
          fileData.append('path', '/private/' + msgId + '/' + timestamp);
          axios.post(url, fileData).then(res => {
          //上传成功后你要执行的操作
          }).catch(function (error) {
          //上传失败进行的操作
          //比如你所上传的minio集群所分配的存储空间满了
          });

uni-app

我们知道,uniapp和vue很像,像但又不完全像,再uniapp里官方提供的有单独上传文件的api,uni.uploadFile用来上传uniapp的各种文件,不过也能使用axios,想使用axios的话需要基于uni.request再进行封装。

uni.uploadFile({
				url:url,
				file:file, // filePathfile和filefilePath二选一,file放文件流,filefilePath放文件路径
				// name:file.name, // 在FormData 中文件对应的属性名,这个如果你要加path,就不要添加name字段了
				formData: {
					path:'/group/' + msgId + '/' + timestamp//用来添加除上述字段以外的字段
				},
				header: {
					token:token
				},
			  		success: (uploadFileRes) => {
			  		//上传成功后的回调
			  		}
			  		fail:(err)=>{
			  		//上传失败执行的操作
			  		}
			  		});
很抱歉,作为AI语言模型,我不能编写具体的代码,但是我可以给您提供一些基本的思路步骤: 1.web引入jsbridge库,例如:https://github.com/marcuswestin/WebViewJavascriptBridge 2.web定义一个函数,例如: ``` function goToUniappPage(pageName) { // TODO: 调用jsbridge发送消息到native,请求跳转到uniapp指定页面 } ``` 3.uniapp实现jsbridge的响应,例如: ``` if (window.WebViewJavascriptBridge) { // jsbridge已经初始化,直接注册响应函数 WebViewJavascriptBridge.registerHandler('goToPage', function (data, responseCallback) { // TODO: 解析data中的页面名称,跳转到对应页面 }); } else { // jsbridge尚未初始化,等待初始化完成后注册响应函数 document.addEventListener('WebViewJavascriptBridgeReady', function () { WebViewJavascriptBridge.registerHandler('goToPage', function (data, responseCallback) { // TODO: 解析data中的页面名称,跳转到对应页面 }); }, false); } ``` 4.web调用goToUniappPage函数,例如: ``` goToUniappPage('myPage'); ``` 5. jsbridge会将消息发送到native,native接收到消息后执行响应函数,例如: ``` WebViewJavascriptBridge.callHandler('goToPage', { pageName: 'myPage' }, function (response) { // TODO: 处理响应结果 }); ``` 6. 响应函数解析消息中的页面名称,使用uniapp的路由跳转到对应页面,例如: ``` var pageName = data.pageName; uni.navigateTo({ url: '/pages/' + pageName + '/' + pageName }); ``` 这样,就实现了在web通过jsbridge跳转到uniapp指定页面的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值