ant-design-vue实现文件上传(一)
<div id="fileUpload"><a-form-item :labelCol="labelCol":wrapperCol="wrapperCol"label="文件"extra="最多5个;附件格式:pdf、word、excel、ppt、png、jpg、jpeg、.
·
<div id="fileUpload">
<a-form-item :labelCol="labelCol"
:wrapperCol="wrapperCol"
label="文件"
extra="最多5个;附件格式:pdf、word、excel、ppt、png、jpg、jpeg、
png、zip、rar文件大小不超过512MB;"
has-feedback>
<a-upload
v-decorator="['attachData',
{
valuePropName: 'fileList',
getValueFromEvent: normFile,
rules: [{ required: true, message: '请选择文件上传!'}]
}
]"
name="file"
list-type="picture"
accept=".pdf,.doc,.docx,image/jpeg,image/jpg,image/png,.xlsx,.xls,.ppt,.zip,.rar"
:beforeUpload="beforeUpload"
:remove="remove"
:data="uploadData"
@change="handleChange"
:action="uploadUrl"
:data="uploadData"
>
<a-button>
<a-icon type="upload"/>
上传申报文件
</a-button>
</a-upload>
</a-form-item>
</div>
文件上传的控件包括一些说明和上传文件类型的限制
里面主要的属性:
beforeUpload :上传之前做一些处理 比如文件类型的判断,文件大小的判断等等
beforeUpload (file, fileList) {
this.fileList = [...this.fileList, file]
let flieArr = file.name.split('.')
let fileaccept = ['pdf', 'doc', 'docx', 'jpg', 'jpeg', 'png', 'xlsx', 'xls', 'ppt', 'zip', 'rar']
let suffix = flieArr[flieArr.length - 1]
// 获取类型结果
let result = fileaccept.some(function (item) {
return item === suffix
})
return new Promise((resolve, reject) => {
if (fileList.length + this.fileList.length > 6) {
this.$message.warning(`最大上传数量为5`)
this.fileList.splice(5 - this.fileList.length)
this.fileList.pop()
reject(new Error('最大上传数量为5'))
} else if (!result) {
this.$message.warning('上传格式不正确')
this.fileList.pop()
reject(new Error('上传格式不正确'))
} else if (file.size > (512 * 1024 * 1024)) { // 判断文件大小是否超标
const errorMsg = `${file.name}超过512M大小的限制!`
this.$message.warning(errorMsg)
this.fileList.pop()
reject(new Error(errorMsg))
} else {
this.uploadData.currentSize = file.size
this.uploadData.fileName = file.name
resolve()
}
})
},
remove:删除上传文件的处理
remove (file) {
const index = this.fileList.indexOf(file)
const newFileList = this.fileList.splice()
newFileList.splice(index, 1)
this.fileList = newFileList
},
action:上传的链接
uploadUrl: /rest/upload,//需要代理
data: 上传的携带的参数
// 上传参数
uploadData: {
downloadFlag: 1,
currentSize: 0,
appendFlag: true,
position: 0,
times: -1,
fileName: '',
publicFlag: false
},
change:上传改变触发,可以判断是否上传成功
更多推荐
已为社区贡献3条内容
所有评论(0)