前端如何上传文件,下载文件
需求描述:当点击发送时,发送需要的信息,将本地的某个文件上传,以附件的上传到数据库中。当点击页面详情时,将附件的名称显示出来,并且可以点击下载,实现下载功能
上传文件
上传文件的工具组件:
<template>
<div>
<input
type="file"
ref="file"
multiple="multiple"
@change="handleFileChange"
style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"
/>
<el-button @click="oninput" size="mini" :class="style">{{ text }}</el-button>
<div slot="tip" class="el-upload__tip">支持上传 {{ attachmentType }}</div>
</div>
</template>
<script>
import { strRebuild,lastSubstring } from "@/utils/strUtil";
export default {
props: ["text"],
data() {
return {
style: "",
attachmentList: [],
attachmentType: "",
attachmentSize: 10,
attachmentLimit: 3
};
},
mounted() {
if (this.text == "添加附件") {
this.style = "tjfj";
};
this.attachmentType = strRebuild([
"txt",
"xls",
"xlsx",
"doc",
"docx",
"ppt",
"pptx",
"visio",
"pdf",
"jpg",
"png",
"jpeg",
"rar",
"zip"
])
},
methods: {
handleFileChange(e) {
//验证附件类型
if(this.attachmentType.indexOf(lastSubstring(e.target.files[0].name,'.').toLowerCase()) !== -1) {
this.attachmentList.push(e.target.files[0]);
} else {
this.$message.error("不支持上传该类型的附件")
}
if (this.text == "选择文件" && e.target.files[0] != null) {
this.$emit("input", e.target.files[0]);
} else {
this.$emit("input", this.attachmentList);
}
},
oninput() {
this.$refs["file"].click();
}
}
};
</script>
<style>
.tjfj {
float: right;
}
</style>
上传文件:(发送信息的方法是写在别的组件了,所以发送附件的方法也需要连带写在一起)
上传文件template块:
<file-selector v-model="otherAttachmentList" :text="texttype2"></file-selector>
上传文件方法块:
// 发送信息的方法
sendMassage(){
let mailAttachments = this.$refs.form.otherAttachmentList;
let id = uuidv4();
if (mailAttachments.length > 0) {
mailAttachments.forEach((item,index) => {
this.saveAttachment(item,id);
})
}
},
// 在ATTACHMENT表中保存附件
saveAttachment(attachment, mailId) {
let params = {
tableName: "ATTACHMENT",
column: "FILE_CONTENT",
data: new FormData()
};
params.data.append("_files", attachment);
params.data.append("FILE_NAME", attachment.name);
params.data.append("FILE_SIZE", attachment.size);
params.data.append("MAIL_ID", mailId);
uploadBlobData(params).then(res => {
console.log(res);
});
},
下载文件
下载文件template块:
<template v-if = "attachmentList.length > 0">
<el-row style="display: flex;align-items: center;padding: 10px 0">
<el-col :span="18">
<span style="font-weight: 600;font-size: 1.2em;">附件</span>
</el-col>
<el-col :span="6" v-if="attachmentList.length > 1">
<el-button size="mini" plain @click="downloadAllFile(attachmentList)">全部下载</el-button>
</el-col>
</el-row>
<el-row v-for="file in attachmentList" :key="file.ID" style="display: flex;align-items: center">
<el-col :span="18">
{{file.FILE_NAME}}
</el-col>
<el-col :span="6">
<el-button plain size="mini">打开</el-button>
<el-button plain size="mini" @click="downloadFile(file)">下载</el-button>
</el-col>
</el-row>
<el-divider></el-divider>
</template>
下载文件方法块:
downloadFile(file) {
let fileType = lastSubstring(file.FILE_NAME,'.')
let blob = bs64toBlob(file.FILE_CONTENT,this.downloadBlobContentType[fileType.toLowerCase()]);
if('download' in document.createElement('a')) {
let elink = document.createElement('a')
elink.download = file.FILE_NAME;
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href)
document.body.removeChild(elink)
} else {
navigator.msSaveBlob(blob,file.FILE_NAME);
}
},
//下载所有附件
downloadAllFile(fileList) {
fileList.forEach(item => {
this.downloadFile(item)
});
}