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

项目需求:
一个功能可以导入表格数据,还有模板提供下载参考
在这里插入图片描述
在这里插入图片描述
大致的功能需求就是这样了,上传文件的组件用的是element-UI自带的组件

配置参数:

我使用的是手动上传模块

参数 说明
action 必选参数,上传的地址
multiple 是否支持多选文件
limit 最大允许上传个数
on-exceed 文件超出个数限制时的钩子
http-request 覆盖默认的上传行为,可以自定义上传的实现
:before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。
file-list 上传的文件列表
auto-upload 是否在选取文件后立即进行上传
<!----- 上传部分 ----->
 <el-upload
            class="upload-demo"
            ref="upload"
            action=""
            name="excelFile"
            :multiple="false"
            :limit="1"
            :on-exceed="handleExceed"
            :http-request="uploadFile"
            :before-upload="beforeAvatarUpload"
            :file-list="fileList"
            :auto-upload="false"
        >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">
              <p>只能上传excel文件</p> 
            </div>
        </el-upload>
		<!----- 下载按钮 ----->
        <div class="bottom">
          <span @click="download">模板下载</span>
        </div>

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();
    },  
发布了18 篇原创文章 · 获赞 1 · 访问量 1094
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览