背景:最近使用vue进行前端开发,难免会遇到需要上传文件和文件下载的,但el-upload直接上传的方式不符合我的要求,就改了一下实现方式。
- 利用el-upload实现文件上传,不需要直接上传,需要携带其他表单参数或者其他情况下,可以使用以下方法
<template>
<div>
<!-- 上传文件 -->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/" //我不需要直接上传,我只需要拿到这个文件
:before-upload = "getUploadFile" //上传之前做处理
:limit="1"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">查找文件</el-button>
</el-upload>
<div class="el-upload__tip">{{"" == this.uploadFileName ? "暂无文件上传" : this.uploadFileName}}</div>
<el-button type="primary" @click="uploadFile">确 定</el-button>
</div>
</template>
<script>
export default {
name: "manageFile",
data() {
return {
uploadFileName: "",
file: null
}
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
getUploadFile(file){
//返回false,表示终止上传,这边我就拿到需要上传的文件了
this.uploadFileName = file.name;
this.file = file;
return false;
},
/**
* 上传文件
*/
uploadFile(){
if(null != this.uploadCategoryForm.file){
//这边可以携带参数,id,code,name什么的
let formData = new FormData();
formData.append('file',this.uploadCategoryForm.file);
//这个是axios方法,你自己的方法
upload(formData).then(result =>{
console.info("上传结果");
});
}else{
console.info("请选择上传的文件!");
}
}
}
}
</script>
- 实现文件下载,后端返回文件流,前端触发事件,不做跳转,直接下载
/**
* 下载文件
* @param docId
*/
downloadFile(){
var elemIF = document.createElement('iframe');
//这是你后端拼接的url,和axios请求url写法一样,一般为了解决跨域问题,都会做代理,所以一般不会把ip地址拼接上去
elemIF.src = url;
elemIF.style.display = 'none';
//将iframe放到body后面
document.body.appendChild(elemIF);
}
总结:不过作啥前端,总是会遇到上传下载的问题,跨域的问题~