<a-upload
:customRequest="customRequest"
:multiple="true"
:beforeUpload="beforeFileUpload"
name="file"
:file-list="uploadedFileList"
@preview="previewFile"
:fileList="fileList"
:remove="imgDel"
v-decorator="['fileIds', {rules: [{required: true, message: '请上传附件！'}]}]"
>
<a-button><a-icon type="upload"/>上传附件</a-button>
</a-upload>
// 上传文件
customRequest(file) {
//初始化文件信息
const fileInfo = {
uid: file.file.uid,
name: file.file.name,
status: 'uploading',
response: '',
url: ''
}
//放入上传列表中，以便于显示上传进度
this.uploadedFileList.push(fileInfo)
const formData = new FormData()
formData.append('file', file.file)//调用上传文件接口
fileInfoUpload(formData).then((res) => {
file.onSuccess(res.data, file)
this.uploading = false
if (res.success) {
fileInfo.status = 'done'
fileInfo.id = fileInfo.uid = res.data
fileInfo.url = 'api/fileInfo/preview?id=' + res.data
fileInfo.name = file.file.name
this.fileList.push(fileInfo)
this.$message.success('上传成功')
this.setFileList()
} else {
fileInfo.status = 'error'
fileInfo.response = res.msg
this.$message.info('上传失败：' + res.message)
}
})
},setFileList() {
this.fileIdStrList = ''
if (this.fileList.length > 0) {
this.fileList.map((val, index) => {
if (index != 0) {
this.fileIdStrList += ','
}
this.fileIdStrList += val.id
})
}//把fileId存到form表单中
this.form.setFieldsValue({fileIds: this.fileIdStrList})
},//上传之前的操作
beforeFileUpload(file, fileList) {
var this_ = this
// this.loading = true
return new Promise((resolve, reject) => {
const isSize= file.size > 1*1024*1024//if(this.fileList.length ==1){//可以限制只上传一个文件
// this_.$message.error('只能上传一个文件')
//reject(false)
//}const isfileType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'application/pdf'
if (!isfileType ) {
this.$message.error('请上传.jpg .png .pdf 格式的文件 ')
reject(file)
}
if (isSize) {
this_.$message.error('上传文件不能超过1M!')
reject(false)
}else{
resolve(true)
}
}).finally(() => {
// this.loading = false
})
},// 预览下载
previewFile(item) {
if (item.name.endsWith('.jpg') || item.name.endsWith('.png')) {
const imgWindow = window.open('')
imgWindow && imgWindow.document.write(`<image src='${item.url}' style='display: flex; margin: 0 auto'/>`)
} else {
if (item.url) {//调用下载接口
fileInfoDownload({id: item.id}).then((res) => {
downLoadFile(res)
}).catch(() => {
this.$message.error('下载错误：获取文件流错误')
})
}
}
},
// 删除图片
imgDel(file) {
var index = this.fileList.indexOf(file)
var newList = this.fileList.slice()
newList.splice(index, 1)
this.fileList = newList//调用删除图片的接口
fileInfoDelete({id: file.id}).then(() => {
this.uploadedFileList.splice(index, 1)
this.setFileList()
return true
})
}
/**
* 下载文件
* @param {Object} res
*/
export function downLoadFile(res) {
var blob = new Blob([res.data], {
type: 'application/octet-stream;charset=UTF-8'
})
var contentDisposition = res.headers['content-disposition']
var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
var result = patt.exec(contentDisposition)
var filename = result[1]
var downloadElement = document.createElement('a')
var href = window.URL.createObjectURL(blob) // 创建下载的链接
var reg = /^["](.*)["]$/g
downloadElement.style.display = 'none'
downloadElement.href = href
downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href)
}