t***@163.com
t***@163.com
  • 发布:2023-02-01 22:02
  • 更新:2024-08-15 00:03
  • 阅读:385

【报Bug】使用 schema2code 生成的表单组件中图片选择显示文件类型无效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 21H2

HBuilderX类型: 正式

HBuilderX版本号: 3.6.14

浏览器平台: Chrome

浏览器版本: 103.0.5060.114

项目创建方式: HBuilderX

示例代码:
"imagefile": {  
            "bsonType": "file",  
            "fileMediaType": "image",  
            "fileExtName": "jpg,png,",  
            "title": "图片文件",  
            "description": "上传图片"  
        },

操作步骤:

1

预期结果:

正常

实际结果:

1

bug描述:

使用 schema2code 功能,生成的一个图片上传组件在正确选择文件后提示 "图片文件类型无效"

2023-02-01 22:02 负责人:DCloud_UNI_HT 分享
已邀请:
DCloud_uni-ad_HDX

DCloud_uni-ad_HDX

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

  • t***@163.com (作者)

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

    2023-02-02 12:04

  • DCloud_uni-ad_HDX

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

    2023-02-02 13:08

  • t***@163.com (作者)

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

    2023-02-06 13:43

  • 1***@qq.com

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

    2023-02-22 11:46

  • education

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

    2024-05-19 01:28

t***@163.com

t***@163.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>
  • hqzmss

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

    2023-04-08 21:23

education

education

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

程序员峰峰

程序员峰峰

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

要回复问题请先登录注册