update 基本完成下载文件

This commit is contained in:
g7hoo 2022-08-15 10:53:32 +08:00
parent b4e00bbca0
commit 51022a6e6d

View File

@ -1,6 +1,15 @@
<template>
<div class="base-upload" style="border-radius: 8px; margin-top: 38px; padding: 0; max-height: 500px;">
<el-upload class="yd-upload" action="#" :http-request="handleUpload" multiple :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove">
<el-upload
class="yd-upload"
action="#"
:http-request="handleUpload"
multiple
:file-list="fileList"
:on-preview="handleDownload"
:on-remove="handleRemove"
:before-remove="beforeRemove"
>
<!-- <el-upload class="yd-upload" :action="$http.adornUrl(url)" multiple name="files" :data="extraParams" :file-list="fileList" :on-remove="handleRemove" :before-remove="beforeRemove"> -->
<el-button size="small" type="primary">{{ buttonContent }}</el-button>
<div v-if="tip" slot="tip" class="el-upload__tip">{{ tip }}</div>
@ -83,6 +92,7 @@ export default {
}
})
},
/** 大小验证 */
validateFile(file) {
this.extraUploadParams.typeCode = 'equipmentInfoFile'
@ -94,9 +104,48 @@ export default {
return isRightSize
},
/** 点击下载 */
handleDownload({ id: fileId, name: fileName }) {
const type = {
download: 1,
preview: 0
}
this.$http({
url: this.$http.adornUrl('/monitoring/attachment/downloadFile'),
method: 'get',
params: this.$http.adornParams({
attachmentId: fileId,
type: type.download
// fileName,
// outputQuality,
// scale
}),
responseType: 'blob'
}).then(({ data: res }) => {
const blob = new Blob([res])
console.log('blob', blob)
if ('download' in document.createElement('a')) {
const alink = document.createElement('a')
console.log('filename: ', fileName)
alink.download = fileName
alink.style.display = 'none'
alink.target = '_blank'
alink.href = URL.createObjectURL(blob)
console.log('下载地址:', alink.href)
document.body.appendChild(alink)
alink.click()
URL.revokeObjectURL(alink.href)
document.body.removeChild(alink)
} else {
navigator.msSaveBlob(blob, fileName)
}
})
},
beforeRemove(file, filelist) {
return this.$confirm(`确定移除 ${file.name}?`)
},
handleRemove(file, filelist) {
// fileList
this.$emit('uploader-update-filelist', filelist)