一:直接用iview的upload
1.1上传
1.html
//action: 上传的地址,必填
//data: 上传时附带的额外参数
//on-success: 文件上传成功时的钩子,返回字段为 response, file, fileList
<Upload
:action= "env + '/Manage/upload'"
:data="{companyId: row.ID}"
:on-success="success">
<Button type="primary" size="small" icon="ios-cloud-upload-outline">上传</Button>
</Upload>
2.js
//上传成功
success(response: any) {
this.$Message.info("上传成功!");
}
//判断当前的环境
if (process.env.NODE_ENV === 'development') {
//开发环境 do something
this.env = 'api';
} else {
//生产环境 do something
}
1.2.下载
//下载文件
download(row: any) {
if (process.env.NODE_ENV === 'development') {
//开发环境 do something
window.open("本地ip/Manage/download?fileId=" + row.ID);
} else {
//生产环境 do something
window.open("线上ip/Manage/download?fileId=" + row.ID);
}
}
二.先填写文件名再上传
2.1上传
html
<div>
<Upload :before-upload="handleUpload" action="/file/jcbg/upload">
<Button icon="ios-cloud-upload-outline">请选择要上传的政策法规</Button>
</Upload>
<div>
<Input v-model="fileName" placeholder="文件名称..." clearable />
</div>
</div>
<div slot="footer">
<Button type="success" size="large" long :loading="loadingStatus" @click="upload(fileName,fileType)">上传</Button>
</div>
js
//选择文件
handleUpload (file) {
this.file = file;
this.fileName = file.name.substring(0,file.name.indexOf("."));//获取文件名
// this.fileType = file.name.substring(file.name.indexOf("."), file.name.length);//获取文件后缀
return false;
},
//上传文件
upload (fileName,fileType) {
if(!this.file || !this.fileName || !this.fileType) {
this.$Message.error('请选则文件,并请将文件名称和类型填写完整!');
return
}
this.uploadModal = false; //关闭导入的弹框
this.loadingStatus = true;
commonsAPI.importPolicy(fileName,fileType,this.file).then(res => {
if(res == "200") {
this.file = null; //清空文件
this.loadingStatus = false;
this.$Message.success('上传成功!');
this.getPolicyList(); //重新政策法规列表
this.fileName = ""; //清空输入框信息:文件名称
this.fileType = ""; //清空输入框信息:文件类型
} else {
this.$Message.error('上传失败!');
}
});
},
//common.js
/**
* 上传政策法规
* @param fileName:文件名称
* @param fileType:文件类型
* @param file:上传的文件
*/
importPolicy(fileName,fileType,file) {
return new Promise((resolve, reject) => {
let param = new FormData(); //创建form对象
param.append('file',file);//通过append向form对象添加数据
console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
let config = {
headers:{'Content-Type':'multipart/form-data'}
}; //添加请求头
axios.post('/file/zcfg/upload?lx='+ fileType + "&mc=" + fileName,param,config).then(res => {
// 异步成功返回值
resolve(res.status)
}).catch(err => {
reject(err)
});
})
},
2.2下载
/**
* 下载政策法规
* @param excelId:附件id
* @param excelName:文件名称
* @param excelNameType:文件后缀
* @param vm:this
*/
downloadPolicy(excelId, excelName, excelNameType, vm) {
//下载政策法规
let url = '/file/zcfg/download/' + excelId;
vm.$Notice.config({
top: 50,
duration: 3
});
axios({
method: 'get',
url: url,
responseType: 'blob',
}).then(res => {
if (res.data.type) {
if (!res) {
return
}
let url = window.URL.createObjectURL(res.data);//定义浏览器下载url
let link = document.createElement('a'); //创建a标签
link.style.display = 'none';//隐藏链接样式
link.href = url;//设定链接 href
link.setAttribute('download', excelName + excelNameType); //设置链接下载属性下载文件名
document.body.appendChild(link);//在body 插入改链接dom
link.click();//模拟点击
vm.$Notice.success({title: excelName + excelNameType + '下载成功'});//推送下载成功提示
} else {
vm.$Notice.error({title: excelName + excelNameType + '下载失败'});//推送下载失败提示
}
})
},