zoukankan      html  css  js  c++  java
  • element-ui实现upload拖拽上传前端部分)

    (一)先上页面:

    需求说明 :

    (1) 可点击上传或者拖拽上传
      (2) 只能上传tar格式并且不能超过10Mb

    (3)上传文件的列表会覆盖上一个上传的(即文件列表只能有一个文件)

    (二)页面代码:

                   <el-upload
                        class="upload-demo"
                        drag
                        :action="https://jsonplaceholder.typicode.com/posts/"
                        :before-upload="beforeUpload"
                        :on-success="upSuccess"
                        :on-error="upError"
                        :on-remove="upRemve"
                        :on-change="upChange"
                        enctype="multipart/form-data"
                        :file-list="fileList"
                        :multiple="false"
                    >
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处,或<em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">
                            只能上传tar格式,且不超过10MB
                        </div>
                    </el-upload>

    注:action为上传文件的接口,:file-list已上传的文件列表,:multiple指是否支持多选文件上传

    (三)上传的钩子函数

            //上传之前
            beforeUpload(file) {
              const fileSuffix = file.name.substring(
                 file.name.lastIndexOf('.') + 1
              );
              const whiteList = ['tar'];
              if (whiteList.indexOf(fileSuffix) === -1) {
                 this.$message({
                    type: 'error',
                    message: '上传文件只能是 tar 格式',
                    showClose: true,
                    offset: 80,
                  });
                  this.fileList = [];
                  return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 10;
                if (!isLt2M) {
                    this.$message({
                        type: 'error',
                        message: '上传文件不能超过10MB',
                        showClose: true,
                        offset: 80,
                    });
                    return false;
                }
            },
            // 上传成功
            upSuccess(res) {
                this.$message({
                    type: 'success',
                    message: '上传成功',
                    showClose: true,
                    offset: 80,
                })
            },
            // 上传失败
            upError() {
                this.$message({
                    type: 'error',
                    message: '上传失败',
                    showClose: true,
                    offset: 80,
                });
            },
           //上传的文件改变时(覆盖原来的文件)
            upChange(file, fileList) {
                if (fileList.length > 0) {
                    this.fileList = [fileList[fileList.length - 1]];
                }
            },
            // 移除列表
            upRemve(file) {
                console.log(file)console.log(file)
            }

    限制文件的格式还可以在html页面中加入 :accept="["tar","txt"]"

    大功告成!!!

  • 相关阅读:
    python3 urllib 类
    python 金角大王博客园学习地址
    配置文件一mapper.xml
    配置文件一mybatis-config.xml
    配置文件一applicationContext.xml
    类文件路径一classpath
    配置文件一web.xml
    日志框架一logback配置和使用
    SpringBoot + redis实现分布式session共享
    SpringBoot集成Redis 一 分布式锁 与 缓存
  • 原文地址:https://www.cnblogs.com/sdfdfd/p/14184343.html
Copyright © 2011-2022 走看看