文件上传
代码如下(示例):
<template>
<div class="upload">
<el-upload
class="upload-demo"
ref="upload"
action=""
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="handleChange"
:file-list="fileList"
:before-upload="BeforeUpload"
:http-request="httpRequest"
:multiple="false"
accept=".jmx">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</div>
</template>
<script>
export default {
data(){
return {
fileList: [],
}
},
methods: {
//自定义文件上传钩子函数
httpRequest(param){
let fileObj = param.file; //相当于input里取得files
let fd = new FormData(); //FormData对象
fd.append("file",fileObj); //文件对象
fd.append("systemId",this.systemId);
upload(fd).then(res=> {
if(res.code===200){
this.$message.success("上传成功");
}else{
this.$message.error(res.msg);
}
})
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
BeforeUpload(file){
var testmsg = file.name.substring(file.name.lastIndexOf(".")+1);
const extension = testmsg === "jmx";
var bool = false;
if (extension) {
bool = true;
} else {
bool = false;
}
if (!extension) {
this.$confirm(`上传文件只能是jmx格式!`)
}
return bool;
},
handleChange(file,fileList) { //上传文件让第二次覆盖第一次的文件
if(fileList.length > 0){
this.fileList = [fileList[fileList.length - 1]];
}
},
}
}
</script>
文件下载
代码如下(示例):
<template>
<button @click="downloadFile(id)"></buttom>
</template>
<scripe>
export default {
methods:{
doenloadFile(id){
var link = document.createElement("a");
link.href = "http://10.1.78.126:9000/testplate/getFile?id="+id;
link.click();
this.$message.success("导出成功");
}
}
}
</script>