【新手求助】使用组件uni-file-picker，选择文件时，为什么没有触发对应的函数。谢谢
xjj210130 opened this issue · comments
利用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">摄 入 量</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，并没有获取到图片信息。请教如何修改。
非常感谢。
测试的时候，发现在选择图片的时候，并没有触发uni-file-picker绑定的函数handleFilePickerSuccess，请问如何修改呢？谢谢
