html内
<a-col span="12">
<a-form-item-private
:labelCol="{ span: 6 }"
:wrapperCol="{ span: 18 }"
label="中标通知书"
>
<a-upload
:headers="uploadHeader"
:action="uploadUrl"
:fileList="removeBidWinningNoticeList"
@preview="uploadPreviewFile"
@change="handleRemoveBidWinningNoticeListChange"
listType="picture"
:accept="fileType"
v-decorator="['removeBidWinningNoticeList', validatorRules.removeBidWinningNoticeList]"
:showUploadList='{showRemoveIcon: !disabled}'
:disabled="disabled"
>
<a-button :disabled="disabled">
<a-icon type="upload" />上传
</a-button>
</a-upload>
</a-form-item-private>
</a-col>
data内
removeContractList: [],//上传文件列表
created() {
this.form.resetFields()
const token = Vue.ls.get('Access-Token')
this.uploadHeader = { 'X-Access-Token': token }
this.init()
},
表单验证
validatorRules: { removeBidWinningNoticeList: {
rules: [
{
required: true,
validator: (rule, value, callback) => this.validateFileList(rule, value, callback, '请上传中标通知书!'),
},
],
},}
method内
//预览
uploadPreviewFile(file) {
let name = file.fileName ? file.fileName : file.response.result.key
let type = name.substring(name.lastIndexOf('.') + 1).toLowerCase()
if (type === 'jpg' || type === 'png') {
this.previewImage = file.url || file.thumbUrl
this.previewVisible = true
} else {
getAction(this.onloadUrl, { fileName: name }).then((res) => {
window.open(res.result.url, '_blank')
})
}
},
//图片上传事件
handleRemoveBidWinningNoticeListChange({ file, fileList }) {
this.removeBidWinningNoticeList = fileList
if (file.type === 'image/png' || file.type === 'image/jpeg') {
file.name = ' '
}
},
回显
if (res.warningVoucher) {
let list = JSON.parse(res.warningVoucher)
that.initImages(list, (result) => {
that.removeBidWinningNoticeList.push(result)
})
}