uniapp小程序解决不能上传文件/图片问题

文章介绍了在uniapp微信小程序中遇到FormData未定义的问题,以及如何使用uni.uploadFile()API进行文件上传。关键点包括设置url、filePath、name、method、header和formData,特别是将tempFilePaths和tempFiles结合使用来上传文件。文章提供了详细的代码示例,并提醒注意filePath和formData的正确设置。
摘要由CSDN通过智能技术生成

uniapp小程序解决不能上传文件/图片问题

当前uniapp微信小程序无法使用formData( )来上传文件/图片,会出现FormData is not defined 问题,
而官方给的uni.uploadFile()也是看的懵懵懂懂。

解决方法

使用uni-app提供的uni.uploadFile()来上传文件/图片。
uni.uploadFile( )官方API

uni.uploadFile({
	url: '后台接口路径',
	filePath: sourceFile.tempFilePaths[0],
	name: 'file',   //对应后台接口参数名
	method: 'POST',
	header: {
		"Authorization": '生成的token'
	},
	formData: {
		//要上传的文件
		file: sourceFile.tempFiles[0]
	},
	success(res) {
		console.log(res);
		if (res.path) {
		that.imageUrls = res.path;
		console.log(that.imageUrls);
		}
	},
	fail(res) {
		console.log(res);
		uni.showToast({
		icon: 'error',
		title: '图片上传失败!'
		})
	}
})

其中sourceFile是你选择要上传的文件/图片,包括tempFiles和tempFilePaths两部分。

sourceFile

注意

filePath放你的临时文件存储路径,也就是

filePath: sourceFile.tempFilePaths[0]

formData放你要上传的文件

formData: {
	file: sourceFile.tempFiles[0]
}
自己也是尝试了好多次,想必大家也会碰上上传文件之类的问题,可以试试这种方式。
uniapp 中,可以使用 uni.uploadFile 方法来上传文件。该方法的语法如下: ``` uni.uploadFile({ url: '', // 上传文件的接口地址 filePath: '', // 要上传文件的本地路径 name: '', // 上传文件对应的 key,服务器可以通过这个 key 获取到文件 formData: {}, // HTTP 请求中其他额外的 form data success: function (res) {}, fail: function (err) {} }) ``` 其中,url 是上传文件的接口地址,filePath 是要上传文件的本地路径,name 是上传文件对应的 key,服务器可以通过这个 key 获取到文件。formData 是 HTTP 请求中其他额外的 form data,可以在服务器端通过 $_POST 获取到。 具体实现步骤如下: 1. 在页面中添加一个选择文件的按钮,使用 `uni.chooseImage()` 方法选择文件,并将选择的文件路径保存到变量中。 ``` <template> <view> <button @tap="chooseFile">选择文件</button> </view> </template> <script> export default { data() { return { filePath: '', // 要上传的文件路径 } }, methods: { chooseFile() { uni.chooseImage({ success: (res) => { this.filePath = res.tempFilePaths[0] } }) } } } </script> ``` 2. 使用 `uni.uploadFile()` 方法上传文件,并将上传结果显示到页面上。 ``` <template> <view> <button @tap="chooseFile">选择文件</button> <button @tap="uploadFile">上传文件</button> <text>{{uploadResult}}</text> </view> </template> <script> export default { data() { return { filePath: '', // 要上传的文件路径 uploadResult: '', // 上传结果 } }, methods: { chooseFile() { uni.chooseImage({ success: (res) => { this.filePath = res.tempFilePaths[0] } }) }, uploadFile() { uni.uploadFile({ url: 'http://example.com/upload', filePath: this.filePath, name: 'file', formData: { 'user': 'test' }, success: (res) => { this.uploadResult = '上传成功,服务器返回:' + res.data }, fail: (err) => { this.uploadResult = '上传失败,错误信息:' + err.errMsg } }) } } } </script> ``` 在上传文件时,需要将要上传的文件路径传递给 `uni.uploadFile()` 方法,并将上传结果显示到页面上。如果上传成功,页面将显示上传成功的提示信息以及服务器返回的数据;如果上传失败,页面将显示上传失败的提示信息以及错误信息。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值