Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【新手求助】使用组件uni-file-picker,选择文件时,为什么没有触发对应的函数。谢谢 #884

Open
xjj210130 opened this issue Apr 26, 2024 · 2 comments

Comments

@xjj210130
Copy link

xjj210130 commented Apr 26, 2024

利用HbuilderX编写下面的代码




<view class="uni-flex-item uni-flex

uni-middle">

				<text class="title">食材名称</text>
				<view class="uni-border-1">
				<input class="uni-input" placeholder="请输入" style="color: #000;" v-model="foodNameInput"/>
				</view>
			</view>
			<view class="uni-flex-item uni-flex uni-middle">
				<text class="title">摄&nbsp;&nbsp;入&nbsp;&nbsp;量</text>
				<view class="uni-border-1">
					<input class="uni-input"  placeholder="请输入" style="color: #000;" v-model="intakeInput"/>
				</view>
			</view>
			<view>
				<view class="example-body">
					<uni-file-picker v-model="selectedFiles" limit="6" title="最多选择6张图片" @success="handleFilePickerSuccess" />
				</view>
			</view>
		</view>
	</uni-card>
	
	<uni-card class="full" title="给监管医师留言">
		<view class="uni-textarea">
			<textarea placeholder="请输入" v-model="messageTextarea"/>
		</view>
	</uni-card>
	
	<button size="default" type="default"
		style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;width: 80%;" 
		class="uni-mx-15 uni-mt-5"
		hover-class="is-hover" @click="save">立即提交</button>
</view>


//<script>
	import uniFilePicker from '@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue';
	export default {
		components: {
			uniFilePicker
		},
		data() {
			return {
				selectedFiles: [] // 存储选择的文件信息
			}
		},
		onLoad() {
		},
		methods: {
			handleFilePickerSuccess(res) {
			    // 从 res.detail 中获取选择的文件信息
				console.log("====res.detail==============");
			    this.selectedFiles = res.detail;
			},
			save() {
				console.log("=========test======1212=====")
				const foodName = this.foodNameInput;
				const intake = this.intakeInput
				const message = this.messageTextarea;
				console.log("====食材名称:", foodName);
				console.log("====intake:", intake);
				console.log("====message:", message);
				
				this.selectedFiles.forEach(file => {
				console.log('=========文件名:=======', file.name);
				// 上传文件到服务器
					uni.uploadFile({
					url: 'https://your-server-url.com/upload',
					filePath: file.path, // 本地文件路径
					name: 'file', // 上传文件的字段名
					success: res => {
						console.log('上传成功', res.data);
						// 可以在这里处理上传成功的逻辑
					},
					fail: err => {
						console.error('上传失败', err);
							// 可以在这里处理上传失败的逻辑
						}
					});
					});
				uni.showToast({title: "保存成功"})
				setTimeout(()=>{
					uni.navigateBack()
				}, 1500);
			}
		}
	}
//</script>

我想获取选择的图片名,图片路径。以便上传到远端服务器。测试的时候发现使用uni-file-picker,并没有获取到图片信息。请教如何修改。
非常感谢。

@xjj210130
Copy link
Author

测试的时候,发现在选择图片的时候,并没有触发uni-file-picker绑定的函数handleFilePickerSuccess,请问如何修改呢?谢谢

@xjj210130 xjj210130 changed the title 【新手求助】使用组件uni-file-picker,如何上传文件。谢谢 【新手求助】使用组件uni-file-picker,选择文件时,为什么没有触发对应的函数。谢谢 Apr 28, 2024
@18148764734
Copy link
Contributor

如果文件选择不成功就不会触发success,这样,你分别弄一个@select@fail,看看上传后这两个函数打印出来的是什么

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants