精华内容
下载资源
问答
  • elementui form表单文件上传

    千次阅读 2020-06-17 10:24:09
    el-form-item prop="billFile" class="upload-img-form" ref="uploadElement" label="文件" :rules="{ required: true, message: '请上传图片' }"> <el-upload class="upload-img" ref="upload" actio
    <el-form ref="form" :model="form" label-width="140px">
    	<el-form-item prop="billFile" class="upload-img-form" ref="uploadElement" label="文件" :rules="{ required: true, message: '请上传图片' }">
    	    <el-upload class="upload-img" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-change="uploadChange" :before-upload="beforeupload"
    	        accept=".xlsx" :auto-upload="false" :multiple="false">
    	        <el-button size="small" type="primary">选择文件</el-button>
    	        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    	    </el-upload>
    	</el-form-item>
    	<el-button type="primary" @click="save">导入</el-button>
    </el-form>
    
     uploadChange(file, filelist) {
        this.form.billFile = file.raw
        if (filelist.length && filelist.length >= 1) {
            /**引用对象然后验证表单域-这个可以清除上一步不通过时的提示*/
            this.$refs.form.validateField('billFile')
    
        }
        // that.$refs['uploadElement'].clearValidate()
        if (filelist.length > 1) {
            filelist.splice(0, 1);
        }
    },
    
    save() {
    	let param = this.qs.stringify(this.form)
    	this.axios.post(``, param).then(res => {})
    }
    
    展开全文
  • vue+elementUI 文件上传功能(表单)

    千次阅读 2021-01-21 14:02:50
    elementUI普通的文件上传比较简单,但是当与表单结合是就会比较复杂。下面分别是普通文件更新和与表单相互结合的文件上传功能实现。 //普通的文件上传 <template slot-scope="scope"> <div class=...

    elementUI普通的文件上传比较简单,但是当与表单结合是就会比较复杂。下面分别是普通文件更新和与表单相互结合的文件上传功能实现。

               //普通的文件上传
               <template slot-scope="scope">
                  <div class="singer-img">
                    <img :src="getUrl(scope.row.picture)" width="100%" alt="未找到资源...">
                  </div>
                  <!--上传头像-->
                  <el-upload :action="uploadUrl(scope.row.id)"
                             :before-upload="beforeAvatorUpload"
                             :on-success="handleAvatorSuccess">
                    <el-button type="primary" size="mini">更新图片</el-button>
                  </el-upload>
                </template>
              </el-table-column>
    

    //后台controller实现
        /**
         * 更新歌手头像
         */
        @PostMapping("/updateSingerPicture")
        @ApiOperation(value = "更新图片", notes = "更新歌手头像")
        public String updateSingerPicture(@RequestParam("file")MultipartFile file, @RequestParam("id") Integer id) {
    
            HashMap<String, Object> map = new HashMap<>();
            if (file.isEmpty()) {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "文件上传失败...");
                return JSON.toJSONString(map);
            }
            //文件名 = 当前时间到毫秒 + 原来的文件名
            String filename = System.currentTimeMillis() + file.getOriginalFilename();
            //文件路径
            String filepath = System.getProperty("user.dir")
                                + System.getProperty("file.separator")
                                + "music-server"
                                + System.getProperty("file.separator")
                                + "data"
                                + System.getProperty("file.separator")
                                + "img"
                                + System.getProperty("file.separator")
                                + "singerPic";
            //如果文件路径不存在,新建该路径
            File file1 = new File(filepath);
            if (!file1.exists()) {
                file1.mkdir();
            }
            //实际的文件地址
            File dest = new File(filepath + System.getProperty("file.separator") + filename);
            //存储到数据库中的相对文件地址
            String storeAvatorPath = "data/img/singerPic/" + filename;
            try {
                file.transferTo(dest);
                Singer singer = new Singer();
                singer.setId(id);
                singer.setPicture(storeAvatorPath);
                int result = singerService.updateSinger(singer);
                if (result > 0) {
                    map.put(Constant.CODE, 1);
                    map.put(Constant.MSG, "上传成功...");
                    map.put("picturePath", storeAvatorPath);
                    return JSON.toJSONString(map);
                }else {
                    map.put(Constant.CODE, 0);
                    map.put(Constant.MSG, "上传失败...");
                    return JSON.toJSONString(map);
                }
            } catch (IOException e) {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "上传失败..." + e.getMessage());
                return JSON.toJSONString(map);
            }
        }

    携带表单的文件上传

        <el-form-item prop="url" label="歌曲上传" size="mini">
              <el-upload
                class="upload-demo"
                :on-success="handleMusicSuccess"
                accept="mp3"
                :action="materialMusicAndText()"
                :auto-upload="false"
                :before-upload="beforeUpload"
                ref="upload"
                :data="songAddForm"
                multiple>
                <el-button size="small">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item style="margin-left: 15%;">
              <el-button type="primary" size="mini" @click="addSong('songAddForm')">添加</el-button>
              <el-button size="mini" @click="resetAddForm">重置</el-button>
            </el-form-item>

     //后台controller实现
        @PostMapping("/insertSong")
        @ApiOperation(value = "添加歌曲", notes = "添加歌曲信息")
        public String insertSong(Song song, @RequestParam("file") MultipartFile file) {
    
            HashMap<String, Object> map = new HashMap<>();
            //上传歌曲文件
            if (file.isEmpty()) {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "歌曲上传失败...");
                return JSON.toJSONString(map);
            }
            //文件名 = 当前时间到毫秒 + 原来的文件名
            String filename = System.currentTimeMillis() + file.getOriginalFilename();
            //文件路径
            String filepath = System.getProperty("user.dir")
                    + System.getProperty("file.separator")
                    + "music-server"
                    + System.getProperty("file.separator")
                    + "data"
                    + System.getProperty("file.separator")
                    + "song";
            //如果文件路径不存在,新建该路径
            File file1 = new File(filepath);
            if (!file1.exists()) {
                file1.mkdir();
            }
            //实际的文件地址
            File dest = new File(filepath + System.getProperty("file.separator") + filename);
            //存储到数据库中的相对文件地址
            String storeSongPath = "data/song/" + filename;
            try {
                file.transferTo(dest);
                song.setUrl(storeSongPath);
                int result = songService.insertSong(song);
                if (result > 0) {
                    map.put(Constant.CODE, 1);
                    map.put(Constant.MSG, "添加成功...");
                    map.put("storeSongPath", storeSongPath);
                    return JSON.toJSONString(map);
                }else {
                    map.put(Constant.CODE, 0);
                    map.put(Constant.MSG, "添加失败...");
                    return JSON.toJSONString(map);
                }
            } catch (IOException e) {
                map.put(Constant.CODE, 0);
                map.put(Constant.MSG, "添加失败..." + e.getMessage());
                return JSON.toJSONString(map);
            }
        }

     

    展开全文
  • 主要介绍了vue elementUI 表单校验(数组多层嵌套)功能的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • 主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
  • ElementUI的Upload组件携带表单数据进行手动上传 项目需求本来是文件单独上传,再提交表单数据,请求两次接口。现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一...

    ElementUI的Upload组件携带表单数据进行手动上传

    项目需求本来是文件单独上传,再提交表单数据,请求两次接口。现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一次接口。
    起初是准备使用upload组件自带的http-request来自定义事件,覆盖组件的默认上传行为,但那样需要自己重新创建formData对象之类的,感觉很麻烦,所以弃用了。
    elementui中的upload组件上传文件时能附带额外的参数,所以我的思路是把表单数据作为上传时附带的额外参数提交给后台就好了
    下面废话不多说,直接上代码了:

    <!-- 表单部分的代码这里就不贴出来了,这部分代码也不重要 -->
     <el-upload
       ref="upload"
       :action="url" 
       :limit="2"
       multiple
       :with-credentials="true"
       :on-success="upFile"
       :on-remove="handleRemove"
       :on-exceed="handleExceed"
       :data="upData"
       :auto-upload="false"
       accept=".KEY, .CRT">
       <img src="/static/images/web/upload.png" alt>
        <span>选择上传证书</span>
       <div slot="tip" class="el-upload__tip">只能上传.key/.crt文件,且只能上传两个</div>
     </el-upload>
     <!-- 提交表单的事件:add -->
     <el-button type="primary" @click="add('form')">添加</el-button>
    
      data() {
        return {
          url: service.defaults.baseURL + "aaa/bbb", // 这里写上传文件的地址
          form: {
            ipArea: "",
            sourceMachineIp: ""
          }
        };
      },
       computed: {
       // 这里定义上传文件时携带的参数,即表单数据
        upData: function() {
          return {
            body: this.form
          }
        }
      },
        methods: {
        add(form) {
          this.$refs[form].validate(async valid => {
            if (valid) {
            // 表单验证通过后使用组件自带的方法触发上传事件
              this.$refs.upload.submit()
            } else {
              return false;
            }
          });
        },
        // 成功上传文件
        upFile(res, file) {
          if (res.status == 200) {
            // 文件上传成功后的回调,比如一些提示信息或者页面跳转都写在这里
            this.$message.success(res.info);
          } else {
            this.$message.warning(res.info);
            let _this = this;
            setTimeout(function() {
              _this.$refs.upload.clearFiles();
            }, 1000);
          }
        },
        // 上传文件超出个数
        handleExceed(files, fileList) {
          this.$message.warning(`当前只能选择上传2 个证书`);
        },
        //  移除文件
        handleRemove(res, file, fileList) {
          this.$message.warning(`移除当前${res.name}证书,请重新选择证书上传!`);
        }
      }
    

    此时,当我点击添加按钮触发事件时,发现后台报了一长串的错
    在这里插入图片描述
    检查了一下,发现body携带的参数根本就读不出来,因为文件上传使用的是Content-Type: multipart/form-data;携带参数使用的是FormData格式,这就找到问题所在了,我们需要把表单数据转换一下格式,后台才能接收到。
    在这里插入图片描述
    将body的格式进行转换一下:
    在这里插入图片描述
    此时就能将表单参数和文件同时传给后台了
    在这里插入图片描述
    在这里插入图片描述
    formData格式下在这里查看上传文件和表单数据的内容在这里插入图片描述
    至此,已实现在上传文件的同时提交表单数据的功能。

    展开全文
  • elementUI表单携带多文件一次性上传

    千次阅读 2019-08-26 10:01:54
    elementUI表单携带多文件一次性上传 由于elementUI的图片上传控件默认是单图片上传的,如果你添加了多张图片它会分多次请求发送给服务器,项目中多数是需要一次性上传多个图片文件且携带表单内容,这里记录一下实现...

    elementUI表单携带多文件一次性上传

    由于elementUI的图片上传控件默认是单图片上传的,如果你添加了多张图片它会分多次请求发送给服务器,项目中多数是需要一次性上传多个图片文件且携带表单内容,这里记录一下实现功能的过程

    代码:

    <el-form  :ref="form" :rules="rules" :model="form" label-width="110px" style="overflow: hidden;margin-left: 300px;margin-top: 30px">
          <el-col :span="12">
            <el-form-item label="印章类型:" prop="seal_type">
              <el-select v-model="form.seal_type" placeholder="请选择" @change="queryApprove">
                <el-option v-for="item in typeOptions" :key="item.Value" :label="item.Text" :value="item.Value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请理由:" prop="apply_reason">
              <el-input type="textarea" :rows="3" v-model.trim="form.apply_reason" placeholder="请输入申请理由"></el-input>
            </el-form-item>
            <el-form-item label="上传材料:" prop="files">
              <el-upload
                v-model="form.files"
                ref="upload"
                class="upload-poster"
                :limit='4'
                accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF,.BMP"
                :action='uploadAction'
                list-type="picture-card"
                :show-file-list="true"
                :on-change="imgPreview"
                :http-request="uploadFile"
                :auto-upload="false">
                <i class="el-icon-plus"></i>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="picUrl" alt="">
                </el-dialog>
              </el-upload>
            </el-form-item>
            <el-form-item label="审批人:" prop="approve_person" >
              <el-select v-model="form.approve_person" placeholder="请选择" style="display: block">
                <el-option v-for="item in approveOptions" :key="item.PersonId" :label="item.Name" :value="item.PersonId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
            <el-button class="submit-button"  @click="submitUpload(form)">提交</el-button>
            </el-form-item>
          </el-col>
        </el-form>
    

    data部分:

    return {
            dialogVisible: false,
            picUrl:'',
            uploadForm: new FormData(),
            form: {
              files:'',
              seal_type:'',
              apply_reason:'',
              approve_person:'',
            },
          };
    

    方法:

    /*由于element多文件是分别上传,所以这里覆盖默认的上传行为,将文件添加到FormData中*/
          uploadFile(file) {
            this.uploadForm.append('files', file.file);
          },
          submitUpload(form) {
            if(this.form.files.length>0){
              this.$refs[form].validate((valid) => {
                if (valid) {
                  this.$refs.upload.submit();
                  this.uploadForm.append('seal_type', this.form.seal_type);
                  this.uploadForm.append('apply_reason', this.form.apply_reason);
                  this.uploadForm.append('approve_person', this.form.approve_person);
                  axios.post(saveSealApplication(),this.uploadForm).then(res=>{
                    if(res.data.Successful==true){
                      this.$message({type: 'success', message: '提交成功!'});
                      this.reload();
                    }
                  })
                }else {
                  return false;
                }
              })
            }else{
              this.$message({type: 'error', message: '请上传申请材料!'});
            }
          },
          imgPreview (file, fileList) {
            let fileName = file.name;
            let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
            if (regex.test(fileName.toLowerCase())) {
              this.picUrl = URL.createObjectURL(file.raw);
              this.form.files=fileList;
            } else {
              //移除最后一个元素
              fileList.pop();
              this.$message.error('请选择图片文件');
            }
          },
    

    说明一下实现思路,首先,在el-upload中添加:on-change方法,此方法在每次添加图片时触发,获取本地上传图片的路径并渲染到src上以达到预览的目的,elementUI官方示例的文件预览是需要发送http请求的,用这种方式就可以完成本地预览。on-change方法会携带file, fileList两个参数,一个是当前文件另一个是文件数组,我这里进行判断如果文件不是指定格式就用.pop方法最后一项移除该文件,否则文件会保留在数组的末尾并形成空白显示。
    在这里插入图片描述

    其次,要实现文件批量上传,这里主要使用了FormData对象来发送表单。首先给el-upload关闭自动上传:auto-upload=“false”,并且添加ref=“upload”,同时添加:http-request=“uploadFile”,覆盖elementUI的上传行为,在用户点击提交时,每一个文件上传时都会触发uploadFile方法,该方法将文件添加到FormData对象中,同时可以手动添加表单携带的参数,这样就完成了多图片及表单的一次性上传。

    总结一下文件上传流程:用户点击上传图片,触发imgPreview方法,实现文件预览,用户表单填写完毕,点击提交,触发submitUpload方法,使用this.$refs.upload.submit();手动触发图片上传,这里的upload与前面说的el-upload的ref必须相同。触发了图片上传后,elementUI仍然是一个个图片上传,但是我们这里使用uploadFile方法覆盖了它的上传行为,并且将文件添加到FormData对象中,然后继续在代码中手动添加你请求需要携带的属性即可。

    这里还遗留了一些问题,就是文件的表单验证我尝试了很多方式没有完成,不是不触发验证就是触发了验证无法关闭,于是我这里将文件添加到数组中,在用户点击提交时判断数组长度并使用消息提示来手动验证。

    展开全文
  • 我的目的是只发送一条请求,同时发送表单文件,目前后台已经测试通过,形参是MultipartFile , CmsTemplate 前端用element-ui实现 单纯的发送表单,我是弄了一个方法,点击就可以发送,但是上传文件使用el-upload标签,...
  • springboot+elementUI文件上传代码htmljs后台图 代码 下面展示一些 内联代码片。 html <el-upload class="upload-demo" ref="upload" :limit="3" :multiple="true" accept=".doc, .docx, .xls, .xlsx, .ppt, ...
  • elementui upload 上传文件详解

    万次阅读 多人点赞 2019-07-21 23:09:52
    这个必须好好说说,不知道各位同学有没有这样的体验,在使用 elementui的时候,发现它真是一个不要太好的库,真的,体验贼好,毕竟vue是只关注数据层面的框架。vue也确实做的太棒了。 说说今天在使用elemenui中 upload ...
  • 实现提交form表单上传文件, 在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现 <el-form-item label="测试依赖...
  • 2、表单中携带文件附件。 3、附件上传过程中进度提示。 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个小技巧设置 1、全局loading弹框定义使用 创建一个loading.js文件: import {...
  • 文件不是必传的,表单数据和文件要传递给后端是在一个接口中实现,前端要如何把数据传递给后端?
  • 在上传的标签中加on-change...在data里定义一个flag:false,给上传表单加校验规则,用validator来定义,在change方法判断,如果上传文件的长度大于等于1,则改变flag为true,当flag为true时,校验规则通过即可。 ...
  • 完整表单代码 <el-form :model="addForm" ref="addFormRef" label-width="75px"> <el-form-item label="学校" prop="school"> <el-select v-model="addForm.school" placeholder="请选择学校">...
  • 自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法 var valiIcon = (rule, value, callback) => { // ...
  • VUE elementUI 表单上传 在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。 1.图片上传模板 :action,必选参数,上传的地址,String类型。 :accept 文件上传类型 drag是否启用拖拽...
  • elementUI 上传文件使用formdata

    千次阅读 2021-01-15 18:06:55
    根据elementUI的文档,是在上传的时候有一个上传图片的接口,点击上传之后会返回给你一个网络路径,你再将网络路径跟表单的其他的信息通过提交接口 提交到后台 <el-upload class="upload-demo" action=...
  • vue+elementui文件上传以及校验提示

    万次阅读 2018-12-27 15:13:01
    我这边上传文件是统一通过表单提交上去,不是单独上传文件。所以用var formdata = new FormData(); 对象来上传表单以及文件。 其中的一个需要上传文件,(目前只能上传一个)。 &lt;el-form-item label="...
  • 需要注意的是,官方文档中的示例采用自动上传的方式,大多数情况我们是需要点击上传按钮或和表单一起提交才开始上传的(即手动上传),此时官方的示例就不满足我们的需求了。怎么办?当然是自己动手丰衣足食啦!!!...
  • 本文主要是解决文件表单一起上传时,需要验证文件类型,如何验证文件类型。如何将表单其它项与文件一起提交保存暂不做说明。 看了官方得文档 使用钩子函数:before-upload="beforeAvatarUpload" ...
  • 查找ElementUI官网,查看相关的组件 页面展示 <el-table-column label="头像" align="center" height="10px"> <template slot-scope="scope"> <el-popover placement="right" title="" trigger=...
  • ElementUI上传表单提交

    千次阅读 2019-03-28 12:00:37
    图片上传表单提交 ...(ElementUI--upload上传组件的自动上传) 图片应该在点击upload上传组件的时候就触发了对应的事件,当选择了要上传的图片,点击确定的时候就请求了后端的接口保存了图片。也就是说你...
  • 前言:在使用elementUI文档的时候,上传图片的组件,使用了formdata的方式,第一次使用,在此记录一下。根据文档,就是在上传的时候,有一个上传图片的接口,点击上传之后会返回给你一个网络路径,再将网络路径跟...
  • 我是想要实现表单加上图片的上传 首先前端代码 <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" enctype='multipart/form-data'> <el-...
  • 基于上面的问题,需要使用form表单上传文件 form表单上传会引起页面的刷新,因此需要动态添加一个iframe来避免页面刷新 from表单上传之后需要调用回调,此时需要监听iframe的onload事件 坑 文件上传之后的返回值...
  • element-ui Form表单验证规则全解 element的form表单非常好用,自带了验证规则,用起来很方便,官网给的案例对于一些普通场景完全没问题,不过一些复杂场景的验证还得自己多看文档摸索,自己经过数次爬坑 之后,总结了几种...
  • 文件上传不同于常见的form表单数据提交,后端servlet不能直接从HttpServletRequest中取到文件,需要进一步解析请求头。 直接对request使用getParameter提取数据什么也取不到,要借助第三方jar包...
  • 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的...
  • # SpringBoot ElementUI 文件上传

    千次阅读 2020-03-17 22:08:28
    SpringBoot ElementUI 文件上传 前端部分 1.ElementUI页面样式如下,主要提交的form表单,样式部分省略,看ElementUI 官网 <el-form :model="form"> <el-form-item label="省份证" :label-width=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,280
精华内容 512
关键字:

elementui表单上传文件