vue上传excel文件到数据库,vue下载文件到本地
相信大家在项目中经常会遇到一些上传下载文件的相关功能。这篇文章将为大家介绍一下某视频剪辑软件实现超过本地下载及上传的示例代码，需要的可以参考一下
相信大家在项目中经常会遇到一些上传下载文件的相关功能，本文就超过的相关功能进行简述：
咱直接看代码：
div class=导入-主要-内容
div class= import-main-button @ click=检查文件
div class= import-center style= cursor:hand
分区/分区
差异上传超过文件/div
/div
/div
div style= margin:5px auto；宽度：350像素
div class= image-多区域 v-if= fileName
span{{文件名} span
图片
@click=removes
style= position:absolute；top:-1px；右：-1px
src= @/assets/icons/tag-remove-icon。巴布亚新几内亚
class=remove-excel
alt=
/
/div
div-否则尚未选择文件！/div
div class=进口通知注意：/div
div class=进口通知
1.请按照超过表格模板内字段格式进行上传
/div
div class=进口通知 2。导入表格数量控制在10000条以内/div
div class=进口通知
3.超过表格模板点击下载：span
style=color: #277cf0
@click=downLoadModel
超过表格模板/span
/div
/div
投入
type=file
id=fileinput
style=display: none
@change=checkFileSure
接受=应用程序/vnd。openxml格式-office文档。电子表格ml。表格，应用程序/vnd.ms-excel
/
/div
data () {
返回{
文件名：“，//Excel文件
文件目录：“，//Excel文件路径
}
},
checkFile() {
文档。查询选择器(#文件输入).单击();
},
checkFileSure() {
让文件obj=文档。查询选择器(#文件输入).文件[0];
让文件=文档。查询选择器(#文件输入))；
if (fileObj) {
这个。文件名=文件对象。姓名；
//文件类型
let fileType=fileObj.type
让fileSize=fileObj.size
//文件大小
如果（
！（
fileType===应用程序/vnd。ms-excel
文件类型===
应用程序/vnd。开放XML格式-office文档。电子表格ml。工作表
)
) {
this.msgError(上传文件仅支持超过格式!);
文件。值=" "；
返回错误的
} else if (fileSize/1024/1024 50) {
this.msgError(文件大小超过50米！");
文件。值=" "；
返回错误的
}
这个。导入完成()；
}否则{
这个message.error(请选择导入的超过文档!);
返回错误的
}
},
//下载超过模版
downLoadModel() {
//getImportTempFile4Prize为下载超过模板接口
getImportTempFile4Prize().然后((res)={
window.location.href=`${this .$ store。状态。我们购物。img head } $ { RES . URI } `；
});
},
importDone() {
如果(这个。filename==null 这个。文件名=== ){
这个message.error(请选择导入的超过文档!);
返回；
}
让文件obj=文档。查询选择器(#文件输入).文件[0];
控制台。日志(文件对象。姓名)；
让文件=文档。查询选择器(#文件输入))；
console.log(文件);
if (fileObj？名称){
let formData=new formData()；
formData.append(file ，file obj)；
formData.append(upload_type ， 02 )；
let fileType=file obj . type . split(/)[1]；
//uploadExcel是后台上传Excel的接口
uploadExcel(表单数据，文件类型)。然后((res)={
file . value=“”；
this.fileDir=res . PATH
this . form . prize _ NUM=RES . NUM；
})。catch(()={
file . value=“”；
})。然后((RES)={ })；
document . query selector(# file input)。值=“”；
}否则{
这个。$message.error(请选择导入的excel文档！);
document . query selector(# file input)。值=“”；
this . filename=“”；
返回false
}
},
以上逻辑在后台界面，前端主要做一些简短的操作。如果需要上传Excel，需要先上传到服务器。
关于Vue Excel本地下载上传的详细方法，本文到此为止。更多Vue Excel相关下载上传内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。