1、样式
<Table :columns="columnsFile" :data="fileList" ref="table" class="table"></Table>
2、数据
columnsFile: [
{
title: '行号',
key: 'id',
width: 60,
render: (h, params) => {
return params.index + 1
}
},
{
title: '操作',
key: 'id',
width: 300,
render: (h, params) => {
let arr = []
arr.push(h('i-button', {
props: {
icon: 'ios-cloud-upload-outline',
size: 'small',
type: 'primary'
},
style: {
position: 'relative',
},
on: {
click: () => {
this.filetype = params.index
}
}
}, '上传'))
return h('Upload', {
props: {
headers: this.headers,
action: "https://test.51xyb.cn/fdd/api/incomes/annex/add",
data: this.UploadParams,
'show-upload-list': false,
format: this.fileformat,
'on-success': this.handleSuccess,
'on-format-error': this.handleFormatError,
'max-size': '51200',
'on-exceeded-size': this.handleMaxSize,
'before-upload': this.handleBeforeUpload,
'on-progress': this.handleprogress,
'on-remove': this.handleremove
},
type: {
size: 'small',
type: 'primary'
},
}, arr);
}
},
{
title: '材料名称',
key: 'name',
},
{
title: '份数',
key: 'num',
render: (h, params) => {
if(params.index==0){
return this.fileList0.length
}else if(params.index==1){
return this.fileList1.length
}else if(params.index==2){
return this.fileList2.length
}else if(params.index==3){
return this.fileList3.length
}
}
}
],
3、JS
handleSuccess(res, file) {
console.log(res)
console.log(this.uploadList)
if (res.code != 200) {
this.$Message.warning(file.name + ':' + res.msg)
this.$refs.upload.clearFiles()
return
}
this.$Message.success(file.name + '上传成功')
this.getAnnexList()
},
handleFormatError(file) {
this.upload_loadding = false
this.$Message.warning('不支持的格式,请重新上传。');
return false
},
handleMaxSize(file) {
this.upload_loadding = false
this.$Message.success('不能超过50M,请重新上传');
return false
},
handleBeforeUpload(file) {
const check = 1 < 20;
if (!check) {
this.$Message.warning('一次最多只能上传1份文件。');
}
this.UploadParams.file = file;
this.UploadParams.type = this.filetype;
//0个人1抵押
this.UploadParams.category = 3;
this.UploadParams.inOrderNo = this.inOrderNo;
console.log('上传参数')
console.log(this.UploadParams)
return check;
},
handleprogress(file, fileList) {
this.upload_loadding = true
},
handleremove(file) {
console.log('=======移除时的文件名' + file.name + '列表' + this.uploadList.length)
},
``
computed: {
uploadList() {
return this.refs.upload.fileList : [];
}
,
UploadUrl() {
return 'https://test.51xyb.cn/fdd/api/incomes/annex/add';
// return this.base.obj.onlinedomainUrl + '/legalcase/case/manage/uploadFile';
}
}
网友评论