导入
1.
<el-form-item class="demand-box">
<el-dialog :visible.sync="demandVisible" width="30%">
<span>
<el-upload
action=""
:show-file-list="true"
:auto-upload="false"
:on-change="uploadChangeFun"
:file-list="fileList"
:on-remove="removeFileFun"
ref="upload"
>
<el-button class="search-btn" type="primary" :plain="true" size="mini">上传文件</el-button>
</el-upload>
</span>
<span slot="footer" class="dialog-footer">
<el-button class="reset-btn" @click="demandVisible=false">取 消</el-button>
<el-button class="search-btn" type="primary" @click="addProjectFun">确 定</el-button>
</span>
</el-dialog>
<el-button type="success" class="reset-btn" size="small" @click="demandVisible=true">导入需求</el-button>
</el-form-item>
2.data中定义
data() {
return {
demandVisible: false, //导入需求弹框
fileList: [], //上传
imgSize: 2, //上传的图片大小限制(默认2M)
uploadExcelVal: "", //上传成功之后的文件地址
};
},
3.methods
methods: {
//设置创建参数
paramSetFun() {
let formData = new FormData();
if (this.uploadExcelVal) {
formData.append("requirementFile", this.uploadExcelVal);
}
formData.append(`compareRequirementVos`,JSON.stringify(this.compareRequirementVos))
//this.compareRequirementVos是一个数组对象
return formData
},
addProjectFun() {
this.demandVisible = false;
this.api({
url: "~~~~~~~",
method: "post",
data: this.paramSetFun()
}).then(res => {
this.$message({
message: "导入成功",
type: "success"
});
this.uploadExcelVal = "";
this.fileList = [];
}).catch(error => {
this.uploadExcelVal = "";
this.fileList = [];
});
},
// 导入
uploadChangeFun(file, fileList) {
let isLt2M = file.size / 1024 / 1024 <= this.imgSize;
const isText = "application/vnd.ms-excel";
const isTextComputer =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
if (file.raw.type != isText && file.raw.type != isTextComputer) {
this.$message.error(`上传文件的格式不正确!`);
this.fileList = [];
return false;
}
if (!isLt2M) {
this.$message.error(`上传文件大小不能超过${this.imgSize}MB!`);
this.fileList = [];
return false;
}
this.uploadExcelVal = file.raw;
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]]; //展示最后一次选择的csv文件
}
},
removeFileFun() {
this.uploadExcelVal = "";
},
}
4.FormData 传递参数有数组类型时,传送的数据格式
//要传递的数据类型:
//【第一种】:
var arr=[
{a:"1",b:"s",c:"6"},
{a:"1",b:"s",c:"6"},
{a:"1",b:"s",c:"6"}
];
//【第二种】:
var arrs = [
["v1","v2","v1"],
["v1","v2","v1"],
["v1","v2","v1"]
];
//正常直接 formData.append("name", val) 传递,后台接收:
第一种:"arr" => "[object Object],[object Object],[object Object]"
第二种:"arrs" => "v1,v2,v1,v1,v2,v1,v1,v2,v1"
//这些都不是我们想要的,那我们应该怎么处理呢?很简单用JSON.stringify转化一下即可:
formData.append("arr", JSON.stringify(arr));
formData.append("arrs", JSON.stringify(arrs));
//这样就能得到我们想要的数据了
第一种:"arr" => "[{"a":"1","b":"s","c":"6"},{"a":"1","b":"s","c":"6"},{"a":"1","b":"s","c":"6"}]"
第二种:"arrs" => "[["v1","v2","v1"],["v1","v2","v1"],["v1","v2","v1"]]"
二.导出
// 导出
exportDataExcel() {
//导出团队数据
this.api({
url: "~ ~ ~",
method: "post",
responseType: "blob", //服务器返回的数据类型
data: {
iterId: this.treeList.iterId, //传给后端的参数
}
}).then(dat => {
const content = dat;
const blob = new Blob([content]);
const fileName = "数据报表.xls";
if ("download" in document.createElement("a")) {
//支持a标签download的浏览器
const link = document.createElement("a"); //创建a标签
link.download = fileName; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
//其他浏览器
navigator.msSaveBlob(blob, fileName);
}
});
},