uniapp rules 校验prop中的图片信息 是否存在
时间: 2023-06-15 15:06:09 浏览: 87
在UniApp中,可以使用uni-providers插件提供的图片检查规则来验证props中的图片信息是否存在。以下是一个示例代码:
```html
<!-- 在页面中引入 uni-providers 组件 -->
<template>
<uni-providers>
<form>
<uni-form-item label="图片">
<uni-image-picker v-model="imageUrl" :rules="imageRules"></uni-image-picker>
</uni-form-item>
</form>
</uni-providers>
</template>
<script>
import { UniProviders, UniImagePicker, UniFormItem } from '@dcloudio/uni-ui';
export default {
name: 'MyComponent',
components: { UniProviders, UniImagePicker, UniFormItem },
data() {
return {
imageUrl: '',
imageRules: [
{ validator: this.checkImageExist, message: '图片不存在' }
]
}
},
methods: {
checkImageExist(rule, value, callback) {
if (!value) {
callback(new Error('请上传图片'));
} else {
// 判断图片是否存在
uni.getImageInfo({
src: value,
success: () => {
callback();
},
fail: () => {
callback(new Error('图片不存在'));
}
});
}
}
}
}
</script>
```
在示例代码中,UniImagePicker组件的v-model绑定了imageUrl属性,而imageRules属性则传入了一个验证规则数组,其中包含了一个checkImageExist方法。在这个方法中,我们使用uni.getImageInfo方法来判断图片是否存在,如果存在则调用callback()方法,否则调用callback(new Error('图片不存在'))方法来提示错误信息。最后将UniImagePicker组件的rules属性绑定到imageRules数组。这样,当用户选择了一张不存在的图片时,就会提示错误信息。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)