"imagefile": {
"bsonType": "file",
"fileMediaType": "image",
"fileExtName": "jpg,png,",
"title": "图片文件",
"description": "上传图片"
},
- 发布:2023-02-01 22:02
- 更新:2024-08-15 00:03
- 阅读:385
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 21H2
HBuilderX类型: 正式
HBuilderX版本号: 3.6.14
浏览器平台: Chrome
浏览器版本: 103.0.5060.114
项目创建方式: HBuilderX
示例代码:
操作步骤:
1
1
预期结果:
正常
正常
实际结果:
1
1
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>
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