vue+elementUI的文件上传和文件下载

项目需求:
一个功能可以导入表格数据,还有模板提供下载参考
vue+elementUI的文件上传和文件下载_第1张图片
vue+elementUI的文件上传和文件下载_第2张图片
大致的功能需求就是这样了,上传文件的组件用的是element-UI自带的组件

配置参数:

我使用的是手动上传模块

参数 说明
action 必选参数,上传的地址
multiple 是否支持多选文件
limit 最大允许上传个数
on-exceed 文件超出个数限制时的钩子
http-request 覆盖默认的上传行为,可以自定义上传的实现
:before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
file-list 上传的文件列表
auto-upload 是否在选取文件后立即进行上传

 
            选取文件
            上传到服务器
            

只能上传excel文件

模板下载

js方法部分:



handleExceed(){
      this.$notify({
        title: '警告',
        message: '只能上传一个文件哦!,若需要上传其他文件请先移除已选择的文件',
        type: 'warning'
      });
    },
    uploadFile(item){
    	//我的项目要求formdata上传数据
      const form = new FormData();
      form.append('FireAlarmDeviceSn',this.networkPage.DeviceSn)
      form.append('file',item.file)

      this.$axios.post(this.$api.ImportFireAlarmDetector,form).then(res=>{
        console.log("res",res)
        if(res.data.result.success){
          this.$message({
            message: '导入数据成功!',
            type: 'success'
          });
          this.GetDeviceDetectorList();//获取联网部件tablelist
        }else{
          this.$message({
            showClose: true,
            message: `导入失败!${res.data.result.failCause}`,
            type: 'error',
            duration:'6000'
          });
        }
        this.fileList =[]
        this.$refs.network_importDialog.dialogVisible = false
      }).catch(err=>{
        console.log("err",err)
      })

    },
    //上传之前的判断文件大小和格式
    beforeAvatarUpload(file){
      const extension = file.name.split(".")[1] === "xls";
      const extension2 = file.name.split(".")[1] === "xlsx";
      if (!extension && !extension2) {
           alert("上传模板只能是 xls、xlsx格式!");
      }
    },
    submitUpload(){
      this.$confirm('导入的方式会覆盖现有的记录, 是否继续?', '导入数据', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
      }).then(() => {
          this.$refs.upload.submit();
            
      }).catch(() => {

      });
    
    }


 //模板下载,后端配置好地址,只需要用a标签下载即可
    download(){
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = 'http://futest.sctsjkj.com/template/消防火警联网部件设施数据表.xlsx';
      link.click();
    },  

你可能感兴趣的:(vue-pc,项目,vue)