elementUI自定义上传文件功能实现(前端后端超详细过程)

目录
  • 简介:
  • 1.简单介绍组件( upload)的属性(熟悉参数的直接略过)
  • 2.主要目的自定义上传文件
    • 2.1 组件代码
    • 2.2 data中的属性
    • 2.3 methods的方法
  • 3.与其他参数通过axios提交到后台
  • 总结

简介:

自定义上传文件并与其他参数一同提交到后台(主要使用axios)

1.简单介绍组件( upload)的属性(熟悉参数的直接略过)

总结elmentUI一下它的使用和常用属性的作用。

limit : 限制了上传文件的个数 , 如果你上传单个文件这里设置 1 ,多个文件就别设置。

auto-upload:自动上传,在我看来,除非是单独上传文件时,
这个属性才有用,因为单独文件直接上传到后台服务器。
而我们想要自己获取到组件里的文件和其它表单数据,再上传,就需要别的办法,下面会讲。

action:这个属性是上传文件的地址,当我们指定了 auto-upload 属性,
组件就会自动按 action 的地址提交。我一般都不设置这个属性:action="none", 
因为我觉得自定义的更好,拓展性强。

multiple:这个属性支持多文件上传,如果你是上传单文件这个属性随便设不设置,如果是多文件,就要设置,所以建议不动,因为它默认开启。

accept:这个就不细说了,限制类型的,当然仅限选择时的类型,用户要是想上传其它类型的文件照样有办法。

2.主要目的自定义上传文件

2.1 组件代码

<el-upload class="upload"
                 ref="upload"
                 action="string"
                 :file-list="fileList"	//存放选择的文件
                 :auto-upload="false"	//取消自动上传
                 :http-request="uploadFile"		自定义上传的方法
                 :on-change="handleChange"	//文件选择后执行的方法
                 :on-preview="handlePreview"	//点击显示文件(没啥用)
                 :on-remove="handleRemove"	//移除文件
                 multiple="multiple">
        <el-button slot="trigger"
                   size="small"
                   type="primary"
                   @click="delFile">选取文件</el-button>
      </el-upload>

2.2 data中的属性

data(){
    return{
	// el-upload组件绑定的属性—— :file-list=“fileList”,渲染后fileList[index]是Object类型,而不是后台所需的File类型,
      // 而这个组件已经把对应的File类型存储到了fileList[index].raw这个属性里,直接拿来用就好.
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
    }
}

2.3 methods的方法

    //点击上传文件触发的额外事件,清空fileList
    delFile () {
      this.fileList = [];
    },
    handleChange (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview (file) {
      console.log(file);
    },

3.与其他参数通过axios提交到后台

这里要使用到FormData()对文件进行存储才能提交到后台

具体实现方式:

//准备一个提交按钮
<el-button type="primary"
                     @click="onSubmit">保存</el-button>

提交事件:

//保存按钮
    onSubmit () {
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);

axios异步提交:

注意:使用FormData提交文件只能使用post请求

在post请求体中需要设置 “Content-Type”:
“multipart/form-data;charset=utf-8”,提醒后台数据是FormData类型

axios.post(post请求的具体路径, formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })

最后后台数据的接收

注意:前台传送的是FormData数据,要拿到文件要使用@RequestParam(前端存放到formData的key)
MultipartFile file进行接收

//采用PostMapping
    @PostMapping(具体路径)
    public String saveVue(String title,@RequestParam("file") MultipartFile file) throws IOException {
       	//拿到具体文件 file
            return "SUCCESS";
    }

介绍到这就基本完成了elmentui的自定义上传功能!

总结

到此这篇关于elementUI自定义上传文件功能实现的文章就介绍到这了,更多相关elementUI自定义上传文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue中element-ui使用axios上传文件

    本文实例为大家分享了vue中element-ui使用axios上传文件的具体代码,供大家参考,具体内容如下 环境:vue2.5.6+axios0.18.1+element-ui2.15.1 在使用element UI的upload组件上传文件时,遇到一些问题,网上的说法不尽如是,在此记录 其实最主要的估计就是axios相关的问题,因我们平时开发的vue项目都是封装过axios后进行api的调用,但上传操作跟一般的api请求不同,所有总是报错,故需要建立新的axios实例. 文件上传类型可以在el

  • Element-UI中Upload上传文件前端缓存处理示例

    Element-UI对于文件上传组件的功能点着重于文件传递到后台处理,所以要求action为必填属性. 但是如果需要读取本地文件并在前端直接处理,文件就没有必要传递到后台,比如在本地打开一个JSON文件,利用JSON文件在前端进行动态展示等等. 下面就展示一下具体做法: 首先定义一个jsonContent, 我们的目标是将本地选取的文件转换为JSON赋值给jsonContent 然后我们的模板文件是利用el-dialog和el-upload两个组件组合:这里停止文件自动上传模式:auto-upl

  • element-ui配合node实现自定义上传文件方式

    目录 element-ui配合node实现自定义上传文件 自定义elementui上传文件及携带参数 下面是一个简单的上传标签 具体实现 携带参数 element-ui配合node实现自定义上传文件 某些情况下,使用element-ui的upload组件默认上传无法满足我们的需求,so-今天主要介绍如何使用element-ui实现自定义上传,以及后端如何接收上传的文件信息和其他信息,根据element-ui文档,http-request可以自定义上传方法,会覆盖掉默认的上传. 首先我们来看前端代

  • vue+element_ui上传文件,并传递额外参数操作

    需求: 1.文件大小验证 2.文件类型验证 3.额外参数传输 <template> <el-upload class="upload-demo" action :limit="1" :file-list="formFileList" :http-request="handleUploadForm" :on-exceed="formHandleExceed" :on-remove="

  • Vue Element UI + OSS实现上传文件功能

    Element提供了upload上传组件,可以查看官网upload组件的详细介绍:查看upload组件的上传源码upload/ajax,使用的是XHR对象上传文件.在项目实践中,发现该上传方法上传大文件时会出现问题,所以决定使用阿里云对象存储服务(Object Storage Service,简称OSS),OSS详细介绍可以查看官网,本文主要讲解的是OSS上传文件的前端,后台开发请查看官网介绍,SDK Browser.js讲解了前端如何进行上传. 1.使用npm安装SDK的开发包: npm in

  • vuejs+element-ui+laravel5.4上传文件的示例代码

    前言 之前的文章讲得太多安装了,今天就不说这个了,因为我的项目是前后端分离的,所以基本是分开执行代码逻辑.其中还有跨域问题,主要还是在laravel中添加头信息放行之类的,这里会提一下做法. element-ui的upload组件 我的vue代码: <template> <el-upload :action="uploadAction" list-type="picture-card" :on-remove="handleRemove&q

  • Element-ui upload上传文件限制的解决方法

    问题 在accept中添加上传文件的类型只能起到"表面"作用,选择"所有文件"之后,还是可以上传任何类型的文件,根本起不到限制作用. 解决办法 在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传.)钩子里去做判断.这里有一个坑,当你设置了 :auto-upload="false"的时候, 这个钩子是不会被触发的,因此也可以在on-change中做判断.

  • elementUI自定义上传文件功能实现(前端后端超详细过程)

    目录 简介: 1.简单介绍组件( upload)的属性(熟悉参数的直接略过) 2.主要目的自定义上传文件 2.1 组件代码 2.2 data中的属性 2.3 methods的方法 3.与其他参数通过axios提交到后台 总结 简介: 自定义上传文件并与其他参数一同提交到后台(主要使用axios) 1.简单介绍组件( upload)的属性(熟悉参数的直接略过) 总结elmentUI一下它的使用和常用属性的作用. limit : 限制了上传文件的个数 , 如果你上传单个文件这里设置 1 ,多个文件就

  • 使用Spring Boot上传文件功能

    上传文件是互联网中常常应用的场景之一,最典型的情况就是上传头像等,今天就带着带着大家做一个Spring Boot上传文件的小案例. 1.pom包配置 我们使用Spring Boot最新版本1.5.9.jdk使用1.8.tomcat8.0. <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId>

  • vue项目中应用ueditor自定义上传按钮功能

    由于上传地址问题,需要自定义上传按钮,效果如图 由于在页里面没有操作dom,所以想到了用vue的 自定义事件绑定$emit .$on来把点击事件传递给ueditor. 首先是给ueditor添加自定义按钮: 1,打开ueditor.all.js,找到btnCmds,大概在27854行,如下图,在数组添加一个自定义的按钮名称,我写的是"love" ueditor.all.js 2,给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件,

  • ajaxfileupload.js实现上传文件功能

    使用ajaxfileupload.js实现上传文件功能 一.ajaxFileUpload是一个异步上传文件的jQuery插语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址 2.fileElementId 文件选择框的id属性,即的id 3.secureuri 是否启用安全提交,默认为false 4.dataType 服务器返回的数据类型.可以为xml,script,json,html.如果不填写,jQuery会自动判断 5.su

  • JavaWeb实现简单上传文件功能

    本文实例为大家分享了JavaWeb实现上传文件功能的具体代码,供大家参考,具体内容如下 基本思想:网站服务器的内部除了有Web应用,还有文件系统,客户端向网站上传文件就是将文件以流的形式传输给了服务器,如图所示: 注意事项: 1.为保证服务器的安全,上传的文件路径应放在外界不能直接访问的目录下,比如WEB-INF目录下.2.因为服务器的文件系统大小有限,上传的文件大小必须要有限制.3.为防止因为文件名重复而导致文件覆盖,应当给上传的文件夹生成唯一的标识,比如时间戳.UUID或者md5加密.4.可

  • ajax实现无刷新上传文件功能

    本文实例为大家分享了ajax实现无刷新上传文件功能的具体代码,供大家参考,具体内容如下 详细代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ajax无刷新上传文件</title> <script> window.o

  • hadoop上传文件功能实例代码

    hdfs上的文件是手动执行命令从本地linux上传至hdfs的.在真实的运行环境中,我们不可能每次手动执行命令上传的,这样太过繁琐.那么,我们可以使用hdfs提供的Java api实现文件上传至hdfs,或者直接从ftp上传至hdfs. 然而,需要说明一点,之前笔者是要运行MR,都需要每次手动执行yarn jar,在实际的环境中也不可能每次手动执行.像我们公司是使用了索答的调度平台/任务监控平台,可以定时的以工作流执行我们的程序,包括普通java程序和MR.其实,这个调度平台就是使用了quart

  • Java 发送http请求上传文件功能实例

    废话不多说了,直接给大家贴代码了,具体代码如下所示: package wxapi.WxHelper; import java.io.BufferedReader; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputSt

  • 简单实现php上传文件功能

    本文实例为大家分享了php上传文件功能的具体代码,供大家参考,具体内容如下 html: <form action="upload_file.php" method="post" enctype="multipart/form-data"> <label for="file">文件名:</label> <input type="file" name="fil

随机推荐