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

更多关于uni-app schema2code生成的表单组件中图片选择显示文件类型无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

移除 fileExtName 字段值最后一个无效的 ,

更多关于uni-app schema2code生成的表单组件中图片选择显示文件类型无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


移除了还是显示图片文件类型无效

回复 t***@163.com: 提供下生成的代码

回复 DCloud_uni-ad_HDX: 这是生成的add.vue页面代码

回复 t@163.com: 回复 DCloud_UNI_HDX: 回复 t@163.com: 开发者，您好，我也遇到了这个问题，不知该如何解决，烦请回复。我用的就是生成的add.vue页面，没做任何改动

回复 1***@qq.com: 请问您解决了么

<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>

你是不是用的vue3？用vue2就没有这个问题了

请问解决了么，我也遇到这个问题

截至当当前时间，实际测试在vue3中这个问题还是存在的

有可能是跨域问题

在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或更新。

回到顶部