uni-app schema2code生成的表单组件中图片选择显示文件类型无效
uni-app schema2code生成的表单组件中图片选择显示文件类型无效
bug描述：
使用 schema2code 功能，生成的一个图片上传组件在正确选择文件后提示 “图片文件类型无效”
示例代码：
"imagefile": {
"bsonType": "file",
"fileMediaType": "image",
"fileExtName": "jpg,png,",
"title": "图片文件",
"description": "上传图片"
}
操作步骤：
1
预期结果：
正常
实际结果：
1
开发环境及版本信息：
| 项目创建方式 | PC开发环境操作系统 | PC开发环境操作系统版本号 | HBuilderX类型 | HBuilderX版本号 | 浏览器平台 | 浏览器版本 |
|---|---|---|---|---|---|---|
| HBuilderX | Windows | 21H2 | 正式 | 3.6.14 | Chrome | 103.0.5060.114 |
12 回复
<template>
<view class="uni-container">
<uni-forms ref="form" :model="formData" validateTrigger="bind">
<uni-forms-item name="name" label="分类名称" required>
<uni-easyinput placeholder="分类名称" v-model="formData.name" trim="both"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="imagefile" label="图片文件">
<uni-file-picker file-mediatype="image" return-type="object" v-model="formData.imagefile"></uni-file-picker>
</uni-forms-item>
<uni-forms-item name="level" label="分类层级">
<uni-easyinput placeholder="0一级 1-二级 2-三级" type="number" v-model="formData.level"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="sort" label="排序">
<uni-easyinput placeholder="类别显示顺序" type="number" v-model="formData.sort"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="parent_id" label="父节点ID">
<uni-easyinput placeholder="父节点ID" v-model="formData.parent_id"></uni-easyinput>
</uni-forms-item>
<view class="uni-button-group">
<button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
<navigator open-type="navigateBack" style="margin-left: 15px;">
<button class="uni-button" style="width: 100px;">返回</button>
</navigator>
</view>
</uni-forms>
</view>
</template>
<script>
import { validator } from '../../js_sdk/validator/test.js';
const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = 'test';
function getValidator(fields) {
let result = {}
for (let key in validator) {
if (fields.includes(key)) {
result[key] = validator[key]
}
}
return result
}
export default {
data() {
let formData = {
"name": "",
"imagefile": null,
"level": null,
"sort": null,
"parent_id": ""
}
return {
formData,
formOptions: {},
rules: {
...getValidator(Object.keys(formData))
}
}
},
onReady() {
this.$refs.form.setRules(this.rules)
},
methods: {
/**
* 验证表单并提交
*/
submit() {
uni.showLoading({
mask: true
})
this.$refs.form.validate().then((res) => {
return this.submitForm(res)
}).catch(() => {
}).finally(() => {
uni.hideLoading()
})
},
/**
* 提交表单
*/
submitForm(value) {
// 使用 clientDB 提交数据
return db.collection(dbCollectionName).add(value).then((res) => {
uni.showToast({
title: '新增成功'
})
this.getOpenerEventChannel().emit('refreshData')
setTimeout(() => uni.navigateBack(), 500)
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
})
}
}
}
</script>
在uni-app中，使用schema2code生成的表单组件如果图片选择显示文件类型无效，可能是由于表单配置或者组件属性设置不正确导致的。以下是一个基本的示例代码，展示了如何配置表单组件来正确选择并显示图片文件类型。
1. 配置表单Schema
首先，确保你的表单Schema配置正确。以下是一个示例Schema，它包含一个文件选择器字段，专门用于选择图片文件：
{
"type": "form",
"title": "图片选择表单",
"fields": [
{
"type": "file",
"label": "选择图片",
"name": "image",
"accept": ".jpg,.jpeg,.png,.gif", // 指定接受的文件类型
"required": true
}
]
}
2. 生成表单组件
使用uni-app的schema2code功能，根据上面的Schema生成表单组件代码。假设生成的组件名为MyForm，你可以直接在页面中引用它。
3. 页面代码示例
在页面的<template>部分，引入并使用生成的表单组件：
<template>
<view>
<MyForm @submit="handleSubmit" />
</view>
</template>
在<script>部分，定义处理表单提交的逻辑：
<script>
import MyForm from '@/components/MyForm.vue'; // 路径根据实际情况调整
export default {
components: {
MyForm
},
methods: {
handleSubmit(formData) {
console.log('表单数据:', formData);
// 这里可以处理表单提交后的逻辑，比如上传图片
const imageFile = formData.image;
if (imageFile && imageFile.type.startsWith('image/')) {
// 图片文件类型有效，进行后续处理
console.log('选择的图片:', imageFile);
} else {
// 文件类型无效，给出提示
uni.showToast({
title: '请选择有效的图片文件',
icon: 'none'
});
}
}
}
};
</script>
4. 注意事项
- 确保
accept属性正确设置了文件类型，支持多个类型时用逗号分隔。 - 在
handleSubmit方法中，检查文件类型是否符合预期（例如，以image/开头）。 - 如果生成的表单组件有额外的配置或属性，请参考uni-app官方文档进行调整。
通过以上步骤，你应该能够解决uni-app schema2code生成的表单组件中图片选择显示文件类型无效的问题。如果问题依然存在，建议检查生成的表单组件代码是否有误，或者查看uni-app的更新日志和社区，看看是否有相关的bug或更新。
