精华内容
下载资源
问答
  • 主要介绍了vue+elementUI实现表单和图片上传及验证功能,结合实例形式分析了vue+elementUI表单相关操作技巧,需要的朋友可以参考下
  • 由于我在提交表单时需要先向后端提交上传图片的申请,并存储图片到服务器,所以我采用axios的上传方式,elementui的upload直接可以通过自带的action属性请求后端上传图片,所以当我点击上传按钮时,首先执行upload的...

    需求

    在Vue项目中,我们可以:
    1、直接通过表单的action来向后端发送请求(本篇文章后台使用PHP)
    2、也可以使用axios来进行后端请求。
    需要上传的表单对象:
    在这里插入图片描述

    由于我在提交表单时需要先向后端提交上传图片的申请,并存储图片到服务器,所以我采用axios的上传方式,elementui的upload直接可以通过自带的action属性请求后端上传图片,所以当我点击上传按钮时,首先执行upload的上传图片的请求。即:this.$refs.pictureUpload.submit();
    注意:为el-upload设置ref="pictureUpload"属性,才能获取到upload。
    这是upload上传成功的处理函数(具体实现参考elelmetui官网)
    在这里插入图片描述
    如果上传成功,后端应该返回图片的储存地址,否则返回0(自定义即可)。而前端就应该根据返回的值进行相应的处理:
    (1)、收到返回地址,赋值给表单(这里将表单设置为一个对象)中的图片地址属性。然后将对象上传到后端,让后端存入数据库中
    (2)、收到返回值0,不执行表单提交,提示上传失败(弹窗)。

    遇到的问题:

    上传图片以及检验都很顺利,但是在上传表达时遇到了一个问题:
    如果时通过form的action属性上传表单,那么后端就可以直接通过表单元素的name来获取对应的值,例如$_POST[“type”]那么就是获取表单中name="type"的元素的value值。
    但是我现在是通过axios将整个form对象传向后端,那么就必须将表单处理成可以让后端php能够获取到表单参数值的形式。
    比如:
    在这里插入图片描述
    上图就是一个请求的例子:
    前端向so.csdn.net/so/search发送了请求,且请求参数为 q:后端请求,t:空,u:空。
    我开始将form对象当成参数发送给后端,发现后端并不能将收到的form对象当成一个对象来处理,即不能通过form.title的形式取到表单的值。这里我使用了 qs ,它可以格式化数据。将请求参数序列化
    安装qs:

    npm intsall qs
    

    在当前页面下引用:

    import qs from "qs"
    

    使用qs格式化表单对象:

    qs.stringify(this.form)
    

    这就将一个form对象格式成了类似:

    title="标题"&content="内容"&time="时间"……
    

    格式的数据。
    所以我们请求时就是

    /php/insert.php?title=标题&content=内容&time=时间……
    

    这样后台的php文件就可以直接通过$_POST[“title”]来获取前端请求的title参数的值,其他参数同理也可以获取到。
    具体axios请求代码:
    在这里插入图片描述

    展开全文
  • 使用elementUI实现将图片上传到本地的示例查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/#/zh-CN/component/upload前台的页面代码为:class="upload-demo"ref="upload"action=...

    使用elementUI实现将图片上传到本地的示例

    查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/#/zh-CN/component/upload

    前台的页面代码为:

    class="upload-demo"

    ref="upload"

    action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler"

    :on-preview="handlePreview"

    :on-remove="handleRemove"

    :file-list="fileList"

    :auto-upload="false"

    >

    选取文件

    上传到服务器

    具体的绑定method的方法见官方文档

    上传到本地,需要在后台建立一个接口进行接收,接口代码如下:

    @Override

    public void handle(List fileItemList, NetUpMediaapiImgUpload up, NetDownMediaapiImgUpload down, HttpServletResponse response) {

    System.out.println("path:"+getBasePath());

    if (!CommUtil.isEmpityList(fileItemList)) {

    List paths=new ArrayList();

    for (FileItem fileItem : fileItemList) {

    String path = writeFile(fileItem);

    paths.add("../../static/img/"+fileItem.getName());//浏览器不允许使用绝对路径

    logger.info("上传成功:" + path);

    logger.info("更新数据");

    }

    down.setAllPath(paths);

    }

    }

    public static String writeFile(FileItem file){

    String fileName = getFileName(file.getName());

    fileName = formatFileName(fileName);

    fileName = getFilePrefix(fileName)+'.'+getFileSuffix(fileName);

    String path = getBasePath()+"/xmob-web/static/img/";

    //path="E:\\xmob\\trunk\\xmob-web\\static\\img\\";//图片应该放在WEB文件夹的static目录下

    File desFile = new File(path);

    if (!desFile .exists() && !desFile .isDirectory()) {

    System.out.println("//不存在");

    desFile .mkdir();

    }

    String result = null;

    try {

    InputStream in = file.getInputStream();

    FileOutputStream out = new FileOutputStream(path+"/"+fileName);

    //创建一个缓冲区

    byte buffer[] = new byte[1024];

    //判断输入流中的数据是否已经读完的标识

    int len = 0;

    //循环将输入流读入到缓冲区当中,(len=in.read(buffer))>0就表示in里面还有数据

    while((len=in.read(buffer))>0){

    //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(path)当中

    out.write(buffer, 0, len);

    }

    in.close();

    out.close();

    //删除处理文件上传时生成的临时文件

    file.delete();

    result = path+"/"+fileName;

    } catch (Exception e) {

    e.printStackTrace();

    }

    return result;

    }

    /**

    * 获取资源路径

    * @return

    */

    private static String getBasePath(){

    String template_dir = System.getProperty("user.dir");

    return template_dir.substring(0,template_dir.lastIndexOf(File.separator));

    }

    /**

    * 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: c:\a\b\1.txt,而有些只是单纯的文件名,如:1.txt

    * 处理获取到的上传文件的文件名的路径部分,只保留文件名部分

    * @param fileName

    * @return

    */

    private static String getFileName(String fileName){

    fileName = fileName.substring(fileName.lastIndexOf(File.separator)+1);

    return fileName;

    }

    /**

    * 格式化文件名

    * @param fileName

    * @return

    */

    private static String formatFileName(String fileName){

    String[] sArr = fileName.split("\\.");

    String str = sArr[0];

    str = str.replaceAll(" ", "");

    str = str.replaceAll("\\s+|_", "-");

    String result = str+"."+sArr[1];

    return result;

    }

    /**

    * 获得文件名前缀

    */

    private static String getFilePrefix(String fileName){

    fileName = formatFileName(fileName);

    String[] sArr = fileName.split("\\.");

    return sArr[0];

    }

    /**

    * 获得文件名后缀

    */

    private static String getFileSuffix(String fileName){

    fileName = formatFileName(fileName);

    String[] sArr = fileName.split("\\.");

    return sArr[1];

    }

    以上这篇使用elementUI实现将图片上传到本地的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

    以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

    展开全文
  • 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对象中,然后继续在代码中手动添加你请求需要携带的属性即可。

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

    展开全文
  • 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);
            }
        }

     

    展开全文
  • upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:none。...
  • 最近有使用vue+elementUI实现多图片上传的需求,遂做此纪录。 本次主要写一下前端的实现细节,至于后台以Multipart[ ]数组接收即可,不再赘述,网上一搜大把文章可供参考。 本次使用elementui上传图片控件的照片墙...
  • 上传照片 ...
  • ElementUI上传表单提交

    千次阅读 2019-03-28 12:00:37
    图片上传表单提交 那么你就要明白图片上传表单提交是两个功能,其对应不同的接口,表单中并不是保存了这个图片,而仅仅是保存了储存图片的路径地址。我们需要分析以下几点: 1、图片如何上传,什么时候上传?...
  • 表单提交中有图片,借用饿了么表单验证,想要给出验证提示,但是图片上传成功后没有及时给反应提示,只是点击提交按钮的时候验证, –原本效果 –想要效果:在当前表单,直接提交图片成功后,就给出成功提示 ...
  • 原因:require() 图片里面为空!!!后来者注意这一点 上干货:主要实现新增一条目录 html <!-- 新增模板弹窗控制 --> <el-button type="success" @click="visible = true" >添加模板</el-...
  • 1.让图片formData放在表单formData中一起上传,实现不了,目前前台获取不到图片的本地地址; 2.让图片的 vm.$refs.upload.submit() 放在post上传表单的函数下上传,这样会请求后台两次,并速度也很慢; 3.那就让...
  • springboot+vue+elementui前后端分离 上传图片和文字说明或其他参数(表单)到阿里oss 前后端代码详解,全代码分享! 一、前端 前端使用的是vue+elementui; data中定义 (根据页面规划来) upLoadVisible: ...
  • 自定义校验方法,因为我的项目是,分情况,可以选择是否有图,所以我定义了一个变量hasFmt,当他为false的时候,才会要求上传,走这个校验方法,rules里声明这个方法 var valiIcon = (rule, value, callback) => { // ...
  • 我是想要实现表单加上图片上传 首先前端代码 <template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" enctype='multipart/form-data'> <el-...
  • 每个表单项还会有其他自定义逻辑,比如 输入框可以插入模板变量、输入字符数量显示、图片上传并显示、富文本 。。。 在这种错综复杂的情况下,完成表单的验证和提交 可以查看具体例子:例子中省略了很多琐碎的...
  • 图片跟随表单一起上传 前端如果直接读图片的二进制数据在数据传输时会报错,所以先读取图片的字符串数据存到额外参数再传到后台进行转换可以比较简单的实现。 vue前端用elementUI上传组件auto-upload=”false”...
  • ElementUI图片上传组件

    2020-10-15 23:33:06
    -- 图片上传 --> <el-form-item> <el-upload class="upload-demo" :before-upload="beforeUpload" :on-remove="onRemove" :on-success="onSuccess" :on-exceed="onExceed" :file-list="fileList...
  • 3、附件上传过程中进度提示。 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个小技巧设置 1、全局loading弹框定义使用 创建一个loading.js文件: import {Loading} from 'element-ui'...
  • ElementUI图片上传 回显

    千次阅读 2019-03-18 17:31:59
    html内容 <!-- 图片上传 --> <el-row> <el-col :span="24"> <el-form-item label="LOGO" prop="logoImg"> <el-upload class="up...
  • springboot+elementUI 多文件上传代码htmljs后台图 代码 下面展示一些 内联代码片。 html <el-upload class="upload-demo" ref="upload" :limit="3" :multiple="true" accept=".doc, .docx, .xls, .xlsx, .ppt, ...
  • vue+elementUI表单图片上传及验证

    万次阅读 多人点赞 2018-10-10 15:37:13
    form表单内容与重点人员图片同时上传图片为必填项 分析弹框页需要解决的问题有: 1、表单内容的验证及必填项 2、新增和编辑用同一个组件如何处理数据 3、图片需要和信息一起传递(即不允许自动上传) 4、...
  • vue+elementUi做的图片上传组件

    千次阅读 2019-01-07 19:15:19
    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为...upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上...
  • 使用Elementui框架,按需引入update上传组件,按照官网引用即可。 上代码。。。 <template> <el-form-item v-show="blockpuzzle && huoti" label="配置手厅背景图片" label-width="160px" prop=...
  • element-ui 表单数据提交之多图片上传

    千次阅读 2019-11-19 20:39:11
    Vue element 表单数据提交之多图片上传 需求 目前有这样一个表单,其中包含基础input数据,及选择多图片表单一起提交后台 选中后: 本地预览选中图片 上传时: 多图片上传 上传表单效果如下: 图片选择...
  • 百度 谷歌 GW84 墨卡托 class="upload-demo" ref="upload" :action="uploadUrl()" name="excel...:before-upload="beforeAvatarUpload"> 将文件拖到此处,或点击上传 上传文件只能是 xls、xlsx、txt 格式! 导入 取消
  • <el-form-item label="上传视频" prop="videoUrl"> <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" ...

空空如也

空空如也

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

elementui表单上传图片