vue限定类型上传文件 最简单实践(单个可文件、可图片)

这个是为了文件导入弄的,内部运维人员使用的 目前还没做删除文件的交互

bash 复制代码
          <el-upload
            class="upload-demo"
            ref="upload"
            :before-upload="handleBeforeUpload"
            action="#"
            accept=".xls,.xlsx"
            :limit="1"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">请上传 大小不超过 10MB 格式为 xls/xlsx 的文件</div>
            ##简单展示 未做删除交互
            <li v-if="this.file != null">{{this.file.name}}</li>
          </el-upload>



data() 内新增属性
 file:null,
bash 复制代码
##获取file对象

  handleBeforeUpload(file) {
      this.file =file;
    },
##表单提交
    submitFormImport(){
      this.$refs["forms"].validate(valid => {
        let formData = new FormData();
        formData.append('file',this.file);
        ##属性类型
        formData.append('taskId',this.taksForip.taskId);
        console.log(formData);
        importForCode(formData).then(response => {
          this.$modal.msgSuccess(response.msg);
          this.opens = false;
        });
      });
    },
## (@RequestParam("file") MultipartFile file  后台属性 

延伸代码 再次限制类型 与大小 fileSizewei

fileSize: {

type: Number,

default: 5 ##5M

},

bash 复制代码
   handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split(".");
        const fileExt = fileName[fileName.length - 1];
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$modal.msgError(
            `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
          );
          return false;
        }
      }
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024   < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传文件,请稍候...");
      this.number++;
      return true;
    },
相关推荐
小曲曲37 分钟前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS3 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架