常用上传方法
<template>
<div>
<el-form>
<el-form-item :label-width="info.labelWidth">
<span slot="label">
<slot name="leftBtn">
</slot>{{info.label}}</span>
<el-upload class="upload-demo" ref="upload" :action="setUrl + '?token=' + this.$store.state.token + '&random=' + new Date().getTime()" :accept="info.accept" :limit="1" :on-change="getFile" :data="fileData" :name="info.name" :on-exceed="handleExceed" :on-success="fnSuccess" :on-error="fnError" :before-upload="beforeAvatarUpload" :auto-upload="true">
<el-button slot="trigger" size="mini" type="danger" :disabled="info.disabled">浏览</el-button>
</el-upload>
<slot name="btn">
</slot>
</el-form-item>
<el-form-item label="错误日志:" class="formItem" :label-width="info.labelWidth" v-if="errShow">
<el-link @click="importErrorLogClick" type="primary"
>下载</el-link>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "",
props:["upfileData"],
data() {
return {
errorBlob:'',
errShow:false,
fullscreenLoading: false,
info:{
test:"",
label:"附件:",
accept:".xlsx, .xls, .doc, .docx, .jpg, .png, .jpeg, .pdf",
//用于在同个页面，多个上传组件调用时，知道在调用哪个
fileType:"",
//用于禁用按钮
disabled:false,
//el-col span的width
spanWidth:18,
//el-form-item label的width
labelWidth:"80px",
//上传时file的主键名
name:"file"
},
loadingOption:{
target:'body',
text:'正在上传...'
},
fileData:{
// name:"file",
// filename:""
},
setUrl: "后台接口"
};
},
computed: {
},
created(){
},
methods: {
//覆盖上一个文件
getFile(file,fileList){
// console.log(fileList);
if(fileList.length>1)fileList.shift() //从前面删除一个数
// console.log(fileList);
},
submitUpload() {
this.$refs.upload.submit();
},
//限制上传
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${files.length ? files.length : 0} 个文件`
);
},
//选择文件后的回调
beforeAvatarUpload(file) {
this.errShow = false;
this.errorBlob = '';
this.$loading(this.loadingOption);
},
//下载错误日志
importErrorLogClick(){
let str = new Blob([this.errorBlob], {type: 'text/plain;charset=utf-8'});
// 注意这里要手动写上文件的后缀名
if(this.$isIE() == -1){//不是ie11
// 兼容不同浏览器的URL对象
let url = window.URL || window.webkitURL || window.moxURL;
// 创建下载链接
let downloadHref = url.createObjectURL(str);
// 创建a标签并为其添加属性
let downloadLink = document.createElement("a");
downloadLink.href = downloadHref;
downloadLink.download = "错误日志.txt";
// 触发点击事件执行下载
downloadLink.click();
}else{//ie11
window.navigator.msSaveOrOpenBlob(str, "错误日志.txt");
}
},
//上传成功回调
fnSuccess(res, file, fileList) {
console.log(res);
this.$nextTick(() => { //Loading 需要异步关闭
this.$loading(this.loadingOption).close();
});
if (res.result == 1) {
this.$message({
showClose: true,
message: res.msg,
type: "success"
});
this.$refs.upload.clearFiles();
this.$emit('ModelSet');
} else if(res.result == '0') {
this.errShow = true;
this.$refs.upload.clearFiles();
this.errorBlob = res.msg;
this.$message({
showClose: true,
message: "请查看错误日志",
type: "error",
});
}
},
//上传失败回调
fnError(err, file, fileList) {
console.log(err);
this.$message({
showClose: true,
message: err.msg,
type: "error"
});
this.$refs.upload.clearFiles();
},
}
};
</script>
调用方法
<fileUpload v-if="uploadFlag" @ModelSet="ModelSet" ref="dialogModel" />
流文件下载
//
getAttachList(type,row){
let params = {};
params.fileType = type;//传给后台的值
await this.$http.get("后台接口",{params:params})
.catch((res) => {
this.fullscreenLoading = false;
this.$message({
showClose: true,
message: "error",
type: "error",
});
})
.then((res) => {
this.fullscreenLoading = false;
if (res.result == 1) {
if(res.rows == null){
this.$message({
showClose: true,
message: "暂无附件，请先生成文件",
type: "error",
});
return
}
if(type == 'word'){
this.getContractTextDown(res.rows,row.contractNo)
}else{
this.downFile(res.rows);
}
} else {
this.$message({
showClose: true,
message: res.msg,
type: "error",
});
}
});
},
//修改下载文件名
getContractTextDown(url, name, type){
let urlArr = url.split("/");
let fileNameStr = urlArr[urlArr.length - 1].split('.');
let fileTit = fileNameStr[0]+'('+name+')';
let filesuffix = fileNameStr[1];
let fileName = fileTit + '.'+filesuffix;
let f_name = fileName || "下载文件";
if (type == "base64") {
var getUrl = url;
} else {
var urlArr = url.split("/");
urlArr[urlArr.length - 1] = encodeURIComponent(urlArr[urlArr.length - 1]);
var getUrl = this.$ajaxUrl + urlArr.join("/");
}
console.log(getUrl);
let parent = document;
if (window.top) {
parent = window.top.document; //IE下载时有一层iframe对象识别顶层内容
}
var a = parent.createElement('a');
a.style.display = 'none';
a.setAttribute("download", f_name);
a.setAttribute("href", getUrl);
// console.log(a);
a.click();
a = null;
},
后台文件直接下载
onExport() {
let idArr = [];
if (this.selectList.length != 0) {
this.selectList.map((item) => {
idArr.push(item.sid);
});
}
let paras = {};
paras.contractNo = this.queryData.contractNo;
this.httpDownFile({
type:"get",
url:"后台接口",
params: paras,
fileName:"文件名称.xlsx"
});
},
导出方法
//获取文件流，导出文件
httpDownFile(dataObj,callback) {
let res;
if (dataObj.type.toLowerCase() == "get") {
res = await this.$http.get(dataObj.url, { params: dataObj.params, responseType: 'arraybuffer' })
} else if (dataObj.type.toLowerCase() == "post") {
if(dataObj.header){
res = await this.$http.post(dataObj.url, dataObj.params, { responseType: 'arraybuffer',headers: { "Content-Type": "multipart/form-data" }})
}else{
res = await this.$http.post(dataObj.url, dataObj.params, { responseType: 'arraybuffer'})
}
}
console.log(res);
// type 为需要导出的文件类型，此处为xls表格类型
let blob = new Blob([res], { type: "application/json" });
// 通过 FileReader 读取这个 blob
let reader = new FileReader();
reader.onload = e => {
let data = e.target.result
// 此处对fileReader读出的结果进行JSON解析
// 可能会出现错误，需要进行捕获
if(callback)callback();
try {
let json = JSON.parse(data);
if (json) {
// 解析成功说明后端导出出错，进行导出失败的操作，并直接返回
if (!dataObj.jsonBack) {
if (json.result == 1) {
this.$message({
showClose: true,
message: json.msg,
type: "success",
});
} else {
this.$message({
showClose: true,
message: json.msg,
type: "error",
});
}
} else {
dataObj.jsonBack(json);
}
return
}
} catch (err) {
// 该异常为无法将字符串转为json
// 说明返回的数据是一个流文件
// 不需要处理该异常，只需要捕获即刻
// type 为需要导出的文件类型，此处为xls表格类型
let blob = new Blob([res], { type: "application/vnd.ms-excel" });
if (!dataObj.fileBack) {
console.log(this.$isIE());
if(this.$isIE() == -1){
// 兼容不同浏览器的URL对象
let url = window.URL || window.webkitURL || window.moxURL;
// 创建下载链接
let downloadHref = url.createObjectURL(blob);
// 创建a标签并为其添加属性
let downloadLink = document.createElement("a");
downloadLink.href = downloadHref;
downloadLink.download = dataObj.fileName;
// 触发点击事件执行下载
downloadLink.click();
}else{
window.navigator.msSaveOrOpenBlob(blob, dataObj.fileName);
}
} else {
dataObj.fileBack(blob);
}
}
// 如果代码能够执行到这里，说明后端给的是一个流文件，再执行上面导出的代码
// do export code
}
// 将blob对象以文本的方式读出，读出完成后将会执行 onload 方法
reader.readAsText(blob)
// })
};
//导出流文件
downFile(url, name, type) {
if (name) {
var f_name = name;
} else {
var urlArr = url.split("/");
var fileName = urlArr[urlArr.length - 1];
var f_name = fileName || "下载文件";
}
if (type == "base64") {
var getUrl = url;
} else {
var urlArr = url.split("/");
urlArr[urlArr.length - 1] = encodeURIComponent(urlArr[urlArr.length - 1]);
var getUrl = config.ajaxUrl + urlArr.join("/");
}
console.log(getUrl);
let parent = document;
if (window.top) {
parent = window.top.document; //IE下载时有一层iframe对象识别顶层内容
}
var a = parent.createElement('a');
a.style.display = 'none';
a.setAttribute("download", f_name);
a.setAttribute("href", getUrl);
// console.log(a);
a.click();
a = null;
};
错误信息直接输出成文件下载
//下载错误日志
importErrorLogClick(){
let str = new Blob([this.errorBlob], {type: 'text/plain;charset=utf-8'});
// 注意这里要手动写上文件的后缀名
if(this.$isIE() == -1){//不是ie11
// 兼容不同浏览器的URL对象
let url = window.URL || window.webkitURL || window.moxURL;
// 创建下载链接
let downloadHref = url.createObjectURL(str);
// 创建a标签并为其添加属性
let downloadLink = document.createElement("a");
downloadLink.href = downloadHref;
downloadLink.download = "错误日志.txt";
// 触发点击事件执行下载
downloadLink.click();
}else{//ie11
window.navigator.msSaveOrOpenBlob(str, "错误日志.txt");
}
},
使用流文件base64方法上传
<el-upload class="avatar-uploader" action="#" :show-file-list="false" :http-request="httpRequest"> <el-button type="primary" size="medium" class="uploadBtn">文件流导入</el-button></el-upload>
//文件转base64
getBase64(file) {
console.log(file)
return new Promise((resolve, reject) => {
let reader = new FileReader();
let fileResult = "";
reader.readAsDataURL(file); //开始转
reader.onload = function() {
fileResult = reader.result;
}; //转 失败
reader.onerror = function(error) {
reject(error);
}; //转 结束 咱就 resolve 出去
reader.onloadend = function() {
resolve(fileResult);
};
});
},
httpRequest(data) {
var _this = this;
this.fileName = data.file.name; //文件名
console.log(data.file.type) //文件类型
//限制上传文件类型
var docxType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; //docx后缀
var txtType = 'text/plain' //txt后缀
var docType = "application/msword" //doc后缀
if(data.file.type == docxType || data.file.type == txtType || data.file.type == docType){
console.log(docxType);
this.getBase64(data.file).then(resBase64 => {
debugger
this.fileBase64 = resBase64.split(',')[1] //直接拿到base64信息
//上传文件接口
this.$http.post('/API/FileAPI/UploadFileMethod',{
base64Filecontent:resBase64.split(',')[1],
catalog:_this.catalog,
filename:data.file.name
})
.then(function(res){
console.log(res)
if(res.status == 200){
}else{}
})
.catch(error =>{
})
})
}else{
this.$message.error("上传文件只能是 DOCX DOC TXT 格式!");
}
},
