先封装一个文件下载方法：
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)
}
template:
<a-upload
:customRequest="customRequest"
:multiple="true"
name="file"
:file-list="uploadedFileList"
@preview="previewFile"
:fileList="fileList"
:remove="imgDel"
v-decorator="['fileIds', {rules: [{required: true, message: '请上传文件'}]}]"
>
<a-button type="primary">添加</a-button>
</a-upload>...
data () {
return {fileList:[],
fileIdStrList:'',
//已经上传的文件列表
uploadedFileList: [],
defaultFileList:[]}
},
methods: {
...
beforeUpload(file){
this.fileList= [...this.fileList,file];
console.log('beforeUpload')
return false;
},
/**
* 上传文件
* @param {Object} file
*/
customRequest( file) {
console.log('文件上传：')
//初始化文件信息，用于展示文件信息
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) {
console.log(res)
fileInfo.status = "done";
fileInfo.id= fileInfo.uid = res.data;
fileInfo.url= "api/sysFileInfo/preview?id="+res.data;
fileInfo.name= file.file.name;
this.fileList.push(fileInfo);
console.log( this.fileList)
this.$message.success('上传成功')
this.setFileList();
} else {
fileInfo.status = "error";
fileInfo.response = res.msg;
this.$message.error('上传失败：' + res.message)
}
})
},
setFileList(){
this.fileIdStrList=''
if(this.fileList.length>0){
this.fileList.map((val,index) => {
if(index!=0){
this.fileIdStrList+=','
}
this.fileIdStrList+=val.id
});
}
console.log(this.fileIdStrList)
this.form.setFieldsValue(
{
fileIds: this.fileIdStrList,
}
)
},
// /api/sysFileInfo/preview?id=
/* 预览下载*/
previewFile(item) {
console.log(item.fileOriginName)
if (item.name.endsWith('.jpg') || item.name.endsWith('.png')) {
console.log('图片文件')
const imgWindow = window.open('')
imgWindow && imgWindow.document.write(`<image src='${item.url}' style='display: flex; margin: 0 auto'/>`)
}
else {
//如果有url,调用后端接口获取文件地址，然后下载
if (item.url) {
this.loading = false
sysFileInfoDownload({id:item.id}).then((res) => {
this.loading = false
downLoadFile(res)
}).catch((err) => {
// this.loading = false
this.$message.error('下载错误：获取文件流错误')
});
}
}
},
// 删除图片
imgDel(file) {
let index=this.fileList.indexOf(file)
let newList=this.fileList.slice()
newList.splice(index,1)
this.fileList=newList;
//调用后端删除接口
deleteFile({id:file.id}).then((res) => {
this.uploadedFileList.splice(index, 1);
this.setFileList();
return true;
});
},}