精华内容
下载资源
问答
  • 这个问题着实困扰我许久,找了好多资料,...这是表单完整代码 <el-dialog title="添加歌曲" :visible.sync="dialogFormVisible"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width=

    这个问题着实困扰我许久,找了好多资料,涉及好多自己未知的知识。什么请求头之类的、数据格式不对应,等等。查阅的资料大多是理论,代码毛线都没有,这对新手一点都不友好。
    嗯哼,拿好板凳坐好,干货满满。

    前端

    • 这是表单完整代码
     <el-dialog title="添加歌曲" :visible.sync="dialogFormVisible">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="曲名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="专辑" prop="introduction">
              <el-input  v-model="ruleForm.introduction"></el-input>
            </el-form-item>
            <el-form-item label="歌词" prop="lyric">
              <el-input type="textarea" v-model="ruleForm.lyric"></el-input>
            </el-form-item>
            <el-form-item label="歌曲文件" prop="introduction">
              <el-upload
                  ref="upload"
                  action="http://localhost:8181/song/addsong"
                  :auto-upload="false"
                  :data="ruleForm"
                  :on-success="handleAvatarSuccess"
                  :limit="1"
                  :before-upload="beforeAvatarUpload"
                  >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUpload">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
              <el-button @click="dialogFormVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
    
    • 表单没什么要讲的,重点提一下上传文件部分
      这是直接拷贝上面的,就是加了一些解析
     <el-form-item label="歌曲文件" prop="introduction">
              <el-upload
                  ref="upload"
                  action="http://localhost:8181/song/addsong"
                  :auto-upload="false"
                  :data="ruleForm"
                  :on-success="handleAvatarSuccess"
                  :limit="1"
                  :before-upload="beforeAvatarUpload"
                  >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
    //ref:是被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。这主要是后面我们要手动上传时必要的一个属性
    //action:必填属性,你要上传的后台方法地址
    //auto-upload:是否自动上传,我们选false,后面我们手动上传,不写的话默认是自动上传的
    //data:上传时携带的参数就放在这里(我这是把整个表单的数据都放在这里) 
    //on-success:上传成功之后根据后端传的参数进行操作
    //limit:上传的文件个数
    //before-upload:上传之前的操作
    
    • (提交表单之前)上传之前的验证
    //调用的是表单中的:before-upload="beforeAvatarUpload"
    beforeAvatarUpload(file) {
          //上传文件的格式
          const idMp3 = file.type == 'audio/mpeg';
          //上传文件的大小
          const isLt10M = (file.size / 1024 / 1024) < 10;
          if (!idMp3) {
            this.$message.error("上传的图片只能是mp3格式");
            return false;
          }
          if (!isLt10M) {
            this.$message.error("上传的图片大小不能超过10MB");
            return false;
          }
          return true;
        },
    
    • (提交表单之后)上传文件之后的操作
    //调用的是表单中的::on-success="handleAvatarSuccess"
     handleAvatarSuccess(resp) {
          if (resp.code == 1) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            this.resetForm('ruleForm');
            this.$refs.upload.clearFiles();
          } else {
            this.$message({
              message: '上传失败',
              type: 'error'
            })
          }
        },
    
    • (提交表单)上传文件
     submitUpload() {
          // 如果之前在表单中没有加属性:ref,这里到页面执行时会报submit没有定义的错
          this.$refs.upload.submit();
        }
    

    后端

    这里值的注意的是:不要在实体类前加@RequestBody,即
    //public Object addsong(@RequestBody Song song, @RequestPart(“file”) MultipartFile mpFile) throws FileNotFoundException {}
    欲知详情:参考:https://blog.csdn.net/DazedMen/article/details/102519462

    @PostMapping("/addsong")
        public Object addsong(Song song, @RequestPart("file") MultipartFile mpFile) throws FileNotFoundException {
            JSONObject jsonObject = new JSONObject();
            System.out.println("这是前端传来的文件"+mpFile);
            System.out.println("这是前端传来的表单"+song);
            if (mpFile.isEmpty()) {
                jsonObject.put("code", 0);
                jsonObject.put("msg", "文件上传失败");
                return jsonObject;
            }
            //设置文件名=当前时间毫秒+原有的文件名
            String fileName = System.currentTimeMillis() + mpFile.getOriginalFilename();
            //设置文件路径
            String filePath = ResourceUtils.getFile("classpath:static/img/song").getPath();
            //如果文件路径不存在,就新增该文件路径
            File file1 = new File(filePath);
            if (!file1.exists()) {
                file1.mkdir();
            }
            //实际的文件地址
            File dest = new File(filePath + System.getProperty("file.separator") + fileName);
            //存到数据库的地址
            String storeAvatorPath = "http://localhost:8181//img/song/" + fileName;
            try {
                mpFile.transferTo(dest);
                song.setUrl(storeAvatorPath);
                //新增数据
                Boolean gg = songService.save(song);
                if (gg){
                    jsonObject.put("code", 1);
                    jsonObject.put("msg", "上传成功");
                    return jsonObject;
                }
            } catch (IOException e) {
                jsonObject.put("code", 0);
                jsonObject.put("msg", "上传失败" + e.getMessage());
            }finally {
                return jsonObject;
            }
        }
    

    希望对你有帮助。

    展开全文
  • 实现提交form表单上传文件, 在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现 <el-form-item label="测试依赖...

    实现提交form表单上传文件,

    • 在开发中有时候设计到上传文件,想实现的需求不是上传文件并携带 参数,是想要提交表单的同时,携带上传的文件。那么 我们就需要用这种方法来实现
       <el-form-item label="测试依赖excel文件:"
                              label-width="150px">
                  <el-upload class="upload-demo"
                             ref="upload"
                             :action="baseUrl+'/module/v1/manage/'"
                             multiple
                             :data="formInline"
                             :on-preview="handlePreview"
                             :file-list="fileList"
                             :http-request="httpRequest"
                             :limit="1"
                             :auto-upload="false">
                    <el-button slot="trigger"
                               size="small"
                               type="">选取文件</el-button>
                    <div slot="tip"
                         style="width: 250px;"
                         class="el-upload__tip">只能上传excel格式文件,文件不能超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-button type="primary"
                           icon=" iconfont icon-baocun"
                           @click="submitUpload('formInline')">保存</el-button>
    

    js代码如下,手动创建一个FormData对象,并且运用append的方法把要提交的表单数据逐个追加

     submitUpload (formName) {
     const fd = new FormData()// FormData 对象
          this.fd = fd
          this.$refs.upload.submit();//获取文件的提交动作
          this.fd.append('productid', this.formInline.productid)
       }   
    
     //新增自定义文件上传事件
        httpRequest (param) {
          console.log(param, '000')
          const fileObj = param.file // 相当于input里取得的files
          this.fd.append('file', fileObj)// 文件对象
          console.log(this.fd.get("file"), '选中文件后')
          axios.post('module/v1/manage/', this.fd).then(res => {
            console.log(res)
            this.moduleidenvieorment = res.data.moduleid
            if (res.data.code == '0000') {
            this.$message({
                  type: 'success',
                  message: '成功!'
                });
            } else if (res.data.code == '400') {
              this.$message.error(res.data.description);
              // this.$refs.upload.clearFiles();
            }
          })
    
        },
    
    展开全文
  • 我的目的是只发送一条请求,同时发送表单和文件,目前后台已经测试通过,形参是MultipartFile , CmsTemplate 前端用element-ui实现 单纯的发送表单,我是弄了一个方法,点击就可以发送,但是上传文件使用el-upload标签,...
  • 1、文件大小验证 2、文件类型验证 3、额外参数传输 <el-upload class=upload-demo action :limit=1 :file-list=formFileList :...
  • Element表单如何校验文件是否上传

    千次阅读 2020-10-19 16:45:12
    使用element校验上传文件的时候会出现文件已经上传成功,但是表单校验依旧提示未上传,如下,点击立即创建依旧提示请上传。 需要在文件上传成功的钩子函数手动添加文件并手动执行校验 html如下: <el-...

    使用element校验上传文件的时候会出现文件已经上传成功,但是表单校验依旧未通过,如下,点击立即创建依旧提示请上传。

    需要在文件上传成功的钩子函数手动添加文件并手动执行校验

     html如下:

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="文件" prop="fileList">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-success="upSuccess" :file-list="ruleForm.fileList">
                        <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-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
     </el-form>

    js代码如下:

    new Vue({
                el: '#page',
                data: function () {
                    return {
                        ruleForm: {
                            fileList: []
                        },
                        rules: {
                            fileList: [{
                                message: '请上传',
                                trigger: 'change',
                                required: true
                            }],
                        }
                    }
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                alert('submit!');
                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    },
                    // 上传成功钩子函数
                    upSuccess(response, file, fileList) {
                        this.ruleForm.fileList.push(file)
                        this.$refs.ruleForm.validateField('fileList')
                    }
                }
            })

     在上传成功的钩子函数需要做两个操作:

    1、手动添加上传文件的对象到绑定的数组之中。

    2、手动执行表单指定字段的校验

     

    触发对整个表单的验证:this.$refs.ruleForm.validate();

    触发对表单部分字段的验证:this.$refs.ruleForm.validateField("字段名");

    展开全文
  • 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 => {})
    }
    
    展开全文
  • el-form 包住 el-upload 并使用 rule 验证文件选择。 分解一下步骤 1、一个form标签 包括属性:rules、model、ref 2、一个 el-form-item 标签 包括属性 : prop 3、一个 el-upload 组件 在基础用法之上增加使用两个...
  • 业务逻辑里需要先添加记录再通过添加记录sql操作完返回的id来生成相应唯一的文件名,el-upload不自动上传有些坑下面描述一下 <el-upload :action="uploadUrl()" :on-remove="handleRemove" :before-upload=...
  • 主要介绍了element-ui upload组件多文件上传的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-element 上传文件 表单内使用上传文件,并和表单其他内容一起上传 <template> <div class="addAppUpdate"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px...
  • 现在需求有变,要求在触发表单传输事件的同时上传文件,也就是提交表单数据和上传文件同步进行,请求一次接口。 起初是准备使用upload组件自带的http-request来自定义事件,覆盖组件的默认上传行为,但那样需要自己...
  • vue之element-ui文件上传

    万次阅读 多人点赞 2018-06-29 17:47:56
    表单一起实现上传(这种情况一般都是文件上传之后,后端返回保存在服务器的文件名,最后和我们的表单一起上传) 对于第一种情况,通过看api就很明了。 http://element-cn.eleme.io/#/zh-CN/component/upload ...
  • vue+element实现上传文件和上传图片

    千次阅读 2020-05-29 10:32:48
    用formData实现表单提交和文件上传 上传文件"> ...请选择文件</el-button> <!--只能上传jpg/png文件,且不超过500kb</div>--> </el-upload> </el-form-item> 上传图片"> <!--:on-remove="imgRemoveList"--> ,.jpeg,.png...
  • vue+elementUI 文件上传功能(表单)

    千次阅读 2021-01-21 14:02:50
    elementUI普通的文件上传比较简单,但是当与表单结合是就会比较复杂。下面分别是普通文件更新和与表单相互结合的文件上传功能实现。 //普通的文件上传 <template slot-scope="scope"> <div class=...
  • 分享一份django+vue+element上传文件进度的简易实现。 采用的是半分离,没有用到vue-cli 需求是上传csv文件,但模板的内容比较小,为了实现一下进度条的效果,暂时没有做文件格式的限制 效果 1 前端核心代码 ...
  • " >上传文件</el-button> </el-upload> </div> </template> <script> export default { name: '', components: {}, props: { limit: { type: Number, default: 1 }, fileList: { type: Array, default: function () ...
  • 本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1、表单...
  • //获取文件上传目录路径,在项目部署路径下的upload目录里。若想让浏览器不能直接访问到图片,可以放在WEB-INF下 String uploadPath=req.getSession().getServletContext().getRealPath("/upload"); File file=new ...
  • 表单上传文件—OSS上传文件(js)

    千次阅读 2019-01-28 15:34:20
    关于(文件上传)表单提交的方案(原生js 方案): 少说话:直接看代码(建议使用OSS上传) 原始的表单提交 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &...
  • element upload上传表单验证

    千次阅读 2020-01-08 21:54:35
    自己写上传的代码,所以action可以随意写 on-change:根据变化修改扁担中的file值 亲测有效 没有图片时 添加图片后 <template> <div> <div class="container"> <el-form style="width:60%...
  • 如下图,需求要实现点击一个按钮,可以让表单的内容和图片...2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传,这样会请求后台两次,并速度也很慢; 3.那就让表单formData放在图片formData中,...
  • elementUI+vue表单上传多个文件和其他表单数据一起提交 这里使用的formdata提交方式,this.$refs.upload.submit()提交会触发http-request自定义上传方法 element代码 <el-dialog title="文件上传" :visible....
  • element-ui upload组件 实现多文件上传

    千次阅读 2019-12-04 14:19:52
    需求:我司要求实现多文件上传,且要求使用...1. 使用element-ui upload组件搭建上传文件页面,页面示例如下: 代码如下: <template> <div> <el-upload :multiple="true" class="uploa...
  • Vue element 删除已上传文件

    千次阅读 2020-09-19 17:18:50
    Vue elment中提供了upload 但是未能给出删除错误文件的方法。因此为解决该问题,采用axios 进行删除。 前端代码 handleRemove(file, fileList) { console.log(file.name, fileList); this.$axios.post('/api/...
  • 关于上传组件的动态添加element 上传组件的动态添加新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式...在开发后台管理系统的时候涉及到表单的动态添加,在表单中包含上传组件,其中遇到的问题
  • 主要为大家详细介绍了vue+element-ui+axios实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • elementUI表单携带多文件一次性上传

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

    千次阅读 2019-11-22 13:35:51
    文章目录 需求 FormData 使用Element Ui上传组件...需求不算复杂,上传一个文件上传内容包括文件本身(File)和文件所属分类(String)。 FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数...
  • 在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后台系统的服务器压力,因此只能前端代码做修改,使得多个文件上传只请求...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,967
精华内容 5,186
关键字:

element表单上传文件