欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

uniapp:uni.chooseFile实现应用内非媒体文件上传功能,轻松解决移动端上传难题

最编程 2024-02-06 20:22:50
...

uni.chooseFile(OBJECT)主要用于h5端的非媒体文件上传,如:.txt,.doc,.xls等文件类型

h5文件上传解决方案

uni.chooseFile({
	count: 1,
	success: (res) => {
		console.log(res)
		uni.uploadFile({
			url:/api/,
			filePath: res.tempFilePaths[0],
			name: 'file',
			formData: {
				'token': uni.getStorageSync('token') || '',
			},
			success: res => {
				res = JSON.parse(res.data);
				if (res.code === 1) {
					console.log('上传成功啦!~')
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '上传失败',
					});
				}
			}
		});
	}
});

app端文件上传解决方案

uniapp文件选择上传插件,可选择任意类型。目前只测试了H5和安卓端。
安卓端弹窗为原生弹窗,不支持修改弹窗显示的内容。
在这里插入图片描述

<view class="lsjupload">
	<lsj-upload 
		ref="lsjUpload0" 
		childId="upload1" 
		:size="50" 
		:count="1"
		formats=".txt,.png,.jpg,.mp4,.doc,.wps,.docx,.xls,.xlsx,.pdf" 
		:debug="false"
		:instantly="true" 
		:option="option" 
		@uploadEnd="onuploadEnd">
		<view class="btn">选择附件</view>
	</lsj-upload>
</view>
data() {
	return {
		// 选择文件
		show:false,
		option: {
			url: this.$imgUrl + '/api/Common/upload',
			// 上传附件的key
			name: 'file',
		},
		files: new Map(),
	}
},
methods:{
	// 上传文件
	onuploadEnd(item) {
		this.files.set(item.name, item);
		// ---可删除--演示上传完成后取服务端数据
		if (item['responseText']) {
			this.files.get(item.name).responseText = JSON.parse(item.responseText);
		}
		// 强制更新视图
		this.$forceUpdate();
	
		if (item.responseText.code == 1) {
			console.log('上传成功啦!~',item.responseText.data.url)
			this.$refs['lsjUpload0'].clear();
		}
	},
}