iview组件库表单中upload组件的校验及upload上传⽂件个数的限制；⾃定义上
传（。。。
1.iview中的upload组件置在form表单中时,⾃定义校验规则实现.(注重点: 1.给upload组件加上对应的ref⽤于获取上传⽂件的fileList;
2.给upload组件双向绑定v-model值，和定义uploadList变量⽤于表单校验.)
先上效果图:
代码部分:
<FormItem label="sim⽂件:" prop="sim">
<Upload
ref="upload"
v-model="formValidate.sim"
type="drag"
:format="['xls','xlsx','csv']"
:before-upload="handleBeforeUpload"
:on-format-error='handleErrtype'
:on-remove='removeFile'
action="///posts">
<div >
<Icon type="ios-cloud-upload" size="52" ></Icon>
<p>请选择⽂件或拖拽⽂件⾄此完成上传</p>
<p>(提⽰：只⽀持.xls,.xlsx或.csv⽂件类型)</p>
</div>
</Upload>
</FormItem>
data(){
// ⾃定义验证判断上传⽂件 fileList 的长度, 这样就和普通输⼊框表现⼀致了
const validateUpload = (rule, value, callback) => {
if(this.uploadList && this.uploadList.length === 0) {
callback(new Error('sim⽂件必传'))
} el {
callback()
}
}
return {
uploadList: [], //上传的⽂件
formValidate: {
sim: ""
},
ruleValidate: {
sim: [ //upload组件的表单校验规则
{ required: true, validator: validateUpload, trigger: 'change' }
]
},
}
}
mounted(){ //写在credted中会报错，可以⾃⾏测试
this.uploadList = this.$refs.upload.fileList //上传的⽂件(如果表单是在类似的弹窗⼦组件内，可写在watch中)
}
2. iview中的upload组件的上传⽂件个数的限制.(因为iview官⽹⽂档并没有提供像elm组件库的upoad组件的on-exceed⽅法，所以只能
采⽤以下这⽅法处理判断⽂件个数).
<FormItem label="sim⽂件:" prop="sim">
<Upload
ref="upload"
v-model="formValidate.sim"
type="drag"
:format="['xls','xlsx','csv']"
:before-upload="handleBeforeUpload"
:on-format-error='handleErrtype'
:on-remove='removeFile'
action="///posts">
<div >
<Icon type="ios-cloud-upload" size="52" ></Icon>
<p>请选择⽂件或拖拽⽂件⾄此完成上传</p>
<p>(提⽰：只⽀持.xls,.xlsx或.csv⽂件类型)</p>
</div>
</Upload>
</FormItem>
data(){
return{
uploadList:[],//上传的⽂件
}
}
methods:{
handleBeforeUpload(file){//上传前钩⼦
const check =this.uploadList.length <1;
if(!check){
this.$('只允许上传单个⽂件，请删除已上传⽂件后再执⾏上传操作');
}
return check;
},
}
mounted(){//写在credted中会报错，可以⾃⾏测试
this.uploadList =this.$refs.upload.fileList //上传的⽂件(如果表单是在类似的弹窗⼦组件内，可写在watch中)
}
3.最后，在关闭(清空)表单的时候记得清空对应的uploadList数组和对应的ref校验等.(详见代码)
cancelBtn(){ //取消按钮，关闭表单(弹窗)
this.$Fields(); //清空匹配规则和还原表单原值
this.uploadList = [] //清空已上传⽂件数据
this.$refs.upload.clearFiles() //清空已上传的⽂件显⽰的列表(进度条那个列表)
},
4.补充: 如果给upload标签加上:default-file-list=“uploadList”，那么此时就⽆需再使⽤this.uploadList = this.
refs.upload.fileList这种赋值和this.
refs.upload.clearFiles()这种清空操作了.因为已经在标签内为其设置了已上传⽂件的赋值展⽰操作.详见以下代码:
<FormItem label="模板⽂件:" prop="tempFile">
<Upload
ref="upload"
v-model="pFile"
type="drag"
:before-upload="handleBeforeUpload"
:on-remove="removeFile"
action="#"
:default-file-list="uploadList"
>
<div >
<Icon
type="ios-cloud-upload"
size="52"
></Icon>
<p>请选择⽂件或拖拽⽂件⾄此完成上传，只允许上传单个⽂件</p>
<p>(提⽰：只⽀持.xls,.xlsx,.doc，或.docx⽂件类型)</p>
</div>
</Upload>
</FormItem>
clearEdit(){ //清空对话框操作
this.$emit('update:show', fal)
this.$Fields(); //清空匹配规则和还原表单原值
this.uploadList = [] //清空已上传⽂件数据
}
5.⼀些特殊情景，服务端(后端)并未提供⽤于存储接受上传⽂件的地⽅的地址；只是接受上传的表单⽂件参数；那么此时就应该使⽤⾃定义上传事件替代upload的默认上传事件.主要代码如下:
<FormItem label="SIM：" prop="sim2" v-if="Type === '2'">
<Upload
ref="upload"
v-model="formValidate.sim2"
type="drag"
accept=".csv"
:format="['csv']"
:before-upload="handleBeforeUpload"
:on-remove="removeFile"
action="#"
:default-file-list="uploadList"
>
<div >
<Icon
type="ios-cloud-upload"
size="52"
></Icon>
<p>请选择⽂件或拖拽⽂件⾄此完成上传，只允许上传单个⽂件</p>
<p>(提⽰：只⽀持.csv⽂件类型)</p>
</div>
</Upload>
<p v-if="Type === '2'">
<a
href="line/storage/templates/sim.xlsx"
download="sim⽂件模板.xls"
class="fz-14 lh-32 umar-l10"
>(下载模板)</a
>
</p>
</FormItem>
data(){
data(){
// ⾃定义验证判断上传⽂件 fileList 的长度, 这样就和普通输⼊框表现⼀致了const validateUpload=(rule, value, callback)=>{
if(this.uploadList &&this.uploadList.length ===0){
callback(new Error('模板⽂件必传'))
}el{
callback()
}
}
return{
uploadList:[],//上传的⽂件
formValidate:{
sim2:"",//上传的卡号
},
ruleValidate:{
sim2:[
{ required:true, validator: validateUpload, trigger:'change'}
]
},
};
},
methods:{
handleBeforeUpload(file){//上传前钩⼦
let size = file.size /1024/1024
let type = file.name
if(type.includes('csv')|| type.includes('CSV')){
if(size <=10){
this.formValidate.sim2 = file
this.uploadList =[{//⽤于表单的已上传⽂件显⽰
'name': file.name,
'url':'',
'size': file.size
}]
return fal;
}el{
this.$('只⽀持10M以内⼤⼩的⽂件，请重新上传');
return fal
}
}el{
this.$('只⽀持.csv⽂件类型，请重新上传');
return fal
}
},
removeFile(file, fileList){//移除已上传⽂件;
this.formValidate.sim2 =''
this.uploadList =[]
},
}
