uniapp.uploadFile封装并解决移动端上传时header头时间戳丢失问题

0 篇文章 0 订阅
function uploadFile(obj) {
	var time = new Date().getTime();
	var secret = Base64.stringify(hmacSHA256(token + "" + time, "0Q4icRHjJY2BRdTJdJrCFixD6OMhhd01"));
	var url = obj.url; //服务器地址
	var filePath = obj.filePath; //要上传文件资源的路径。
	var formData = obj.formData;
	var success = obj.success;
	var name = obj.name; //文件对应的 key 
	var method = obj.method || 'POST'; //默认post请求
	uni.uploadFile({
		url: url,
		filePath: filePath,
		name: name,
		formData: formData,
		header: {
			'token': token,
			'time': time.toString(),   //H5端不转没问题,移动端必须转string类型
			'secret': secret
		},
		method: method,
		success: function(res) {
			console.log(obj)
			success(res)
		},
		fail: function(res) {}
	})

更多前端技术、热门资讯请关注微信公众号:A前端

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 很高兴为您解答。uniapp.uploadFile可用于blobur上传,它可以帮助您轻松将文件上传到blobur。它非常简单易用,只需要调用uniapp.uploadFile方法,并传入blobur的url即可完成上传。 ### 回答2: 在使用uniapp.uploadFile上传文件之前,需要先引入uniapp的网络请求API。 1. 在需要上传文件的页面中,首先引入uniapp的网络请求API: ``` import uniRequest from "@/common/request.js"; ``` 2. 调用uniapp.uploadFile方法进行文件上传,示例如下: ``` uni.chooseImage({ success: function (res) { // 获取选择的文件路径 var filePath = res.tempFilePaths[0]; // 调用uniapp.uploadFile方法进行文件上传 uni.uploadFile({ url: 'http://example.com/upload', // 上传服务器的URL地址 filePath: filePath, // 要上传的文件路径 name: 'file', // 上传的文件名 success: function (res) { var data = res.data; // 上传成功后的处理逻辑 } }); } }); ``` 3. 根据实际情况,修改url、filePath和name参数,确保上传到正确的服务器路径,并指定上传的文件名。 4. 在上传成功的回调函数中,可以处理上传成功后的逻辑,例如获取服务器返回的数据并进行展示或其他操作。 需要注意的是,在进行文件上传,可能会遇到跨域的问题。如果遇到跨域问题,可以在服务器端配置允许跨域访问的设置或使用其他方式解决跨域问题。同,要确保网络连接正常,以及服务器端能够正确处理文件上传的请求。以上是一个简单的示例,具体使用方法还需要根据实际情况进行适配和调整。 ### 回答3: blobur 是一个基于 Blob 对象的文件上传插件,它可以在 uni-app 中使用 uni.uploadFile 来实现文件上传功能。下面我将详细介绍如何使用 blobur 进行文件上传。 1. 首先,我们需要在 uni-app 项目中安装 blobur 插件。可以在 HBuilder X 的插件市场中搜索 blobur,并进行安装。 2. 安装完成后,在需要使用文件上传功能的页面或组件中引入 blobur: ``` import Blobur from '@/common/js_sdk/blobur/src/bobur.js' ``` 3. 然后,我们需要创建一个 uploadFile 方法来进行文件上传。可以在 methods 中添加如下代码: ``` methods: { uploadFile() { uni.chooseImage({ count: 1, success: (res) => { const tempFilePaths = res.tempFilePaths const file = Blobur.fileFromPath(tempFilePaths[0]) // 使用 uni.uploadFile 进行文件上传 uni.uploadFile({ url: 'https://example.com/upload', // 上传接口地址 filePath: file.blob, // Blob 对象的文件路径 name: 'file', // 服务器接收文件的参数名 success: (res) => { console.log(res.data) // 上传成功后的返回数据 }, fail: (err) => { console.log(err) // 上传失败的异常信息 } }) }, fail: (err) => { console.log(err) // 选择图片失败的异常信息 } }) } } ``` 4. 最后,可以在页面中的某个按钮或其他交互事件中调用 uploadFile 方法来触发文件上传: ``` <template> <div> <button @click="uploadFile">上传文件</button> </div> </template> ``` 这样,当点击 "上传文件" 按钮,将会调用 uploadFile 方法进行文件选择和上传操作。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值