使用element-ui组件库上传文件及自定义上传文件(包含多文件上传及自定义上传携带其他参数)

文章目录

使用element-ui组件库上传文件及自定义上传文件

组件使用

使用上传组件需要引入并注册Upload组件而这个组件中又用到了Button，所以也需要注册一下Button，我们只需要在main.js(new Vue实例的文件里边)，加上下边的代码

//引入importimport{ Upload , Button }from'element-ui'//注册
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)

官网中有好几种上传的代码，但是总的来说就两种，一种是直接上传的，一种是手动上传的，其他的就是样式稍微变了一下，用法什么的都差不多，所以这里只复制了一下自动上传和手动上传的两个例子的代码来说明一下element-ui提供给我们的一些方法的使用

一些属性值及函数

属性名类型作用action(必选)字符串指定提交的接口multiple布尔值是否支持多文件上传drag布尔值是否启用拖拽on-preview函数点击文件列表中已上传的文件时执行的函数on-remove函数文件列表移除文件时执行的函数on-success函数文件上传成功时执行的函数on-error函数文件上传失败时执行的函数on-change函数文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用before-upload函数上传文件之前执行的函数before-remove函数删除文件之前执行的函数auto-upload布尔值是否选取文件后立即进行上传file-list数组上传的文件列表http-request函数覆盖掉默认上传的行为disabled布尔值是否禁用limit数字最大允许上传个数on-exceed函数超出个数限制时执行的函数
其中的一些函数我们在自动上传中不好说明，所以上边的一些属性和方法的用法演示主要在自定义上传中演示

提示信息的配置

在上传的文件中的官方代码中我们不仅用到Upload组件和Button组件，同时还需要引入提示信息的一个的一个模块和提示信息的一个模块

只需要在上边组件使用的代码修改为

//引入importimport{ Upload , Button , MessageBox ,Message }from'element-ui'//注册
Vue.component(Upload.name, Upload)
Vue.component(Button.name, Button)//往Vue原型中添加方法，这样的话我们才能在全局里边通过this来直接访问到Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$message=Message

上边往Vue原型中添加方法我们用到了Vue原型中的一个关系,即VueComponent.prototype.proto===Vue.prototype

同时MessageBox中不仅包含我们用到的confim也包含其他的一些提示类的方法

this.$confim()会出现一个带确定和取消按钮的弹窗，同时函数执行会返回一个promise对象，我们可以在其.then方法中执行点击确定的回调，在.catch中执行取消的回调

this.

    m
   
   
    e
   
   
    s
   
   
    s
   
   
    a
   
   
    g
   
   
    e
   
   
    .
   
   
    x
   
   
    x
   
   
    x
   
   
    (
   
   
    )
   
   
    会
   
   
    出
   
   
    现
   
   
    一
   
   
    个
   
   
    提
   
   
    示
   
   
    框
   
   
    ，
   
   
    提
   
   
    示
   
   
    框
   
   
    的
   
   
    类
   
   
    型
   
   
    分
   
   
    为
   
   
    四
   
   
    种
   
   
    ，
   
   
    分
   
   
    别
   
   
    是
   
   
    成
   
   
    功
   
   
    (
   
   
    x
   
   
    x
   
   
    x
   
   
    的
   
   
    值
   
   
    是
   
   
    s
   
   
    u
   
   
    c
   
   
    c
   
   
    e
   
   
    s
   
   
    s
   
   
    )
   
   
    ，
   
   
    错
   
   
    误
   
   
    (
   
   
    x
   
   
    x
   
   
    x
   
   
    的
   
   
    值
   
   
    是
   
   
    e
   
   
    r
   
   
    r
   
   
    o
   
   
    r
   
   
    )
   
   
    、
   
   
    警
   
   
    告
   
   
    (
   
   
    x
   
   
    x
   
   
    x
   
   
    的
   
   
    值
   
   
    是
   
   
    w
   
   
    a
   
   
    r
   
   
    n
   
   
    i
   
   
    n
   
   
    g
   
   
    )
   
   
    以
   
   
    及
   
   
    消
   
   
    息
   
   
    (
   
   
    不
   
   
    写
   
   
    m
   
   
    e
   
   
    s
   
   
    s
   
   
    a
   
   
    g
   
   
    e
   
   
    后
   
   
    边
   
   
    的
   
   
    东
   
   
    西
   
   
    )
   
   
    ，
   
   
    我
   
   
    们
   
   
    通
   
   
    过
   
   
    修
   
   
    改
   
  
  
   message.xxx()会出现一个提示框，提示框的类型分为四种，分别是成功(xxx的值是success)，错误(xxx的值是error)、警告(xxx的值是warning)以及消息(不写message后边的东西)，我们通过修改
  
 
message.xxx()会出现一个提示框，提示框的类型分为四种，分别是成功(xxx的值是success)，错误(xxx的值是error)、警告(xxx的值是warning)以及消息(不写message后边的东西)，我们通过修改message点后边的的值,当然我们这里只是说简单的说明一下我们这里用到的，想要了解具体的可以看官方文档去细致的了解一下

直接上传

直接上传顾名思义就是我们上传图片的时候，上传完它就会"立即"上传给action所指定的url连接

<template><el-uploadclass="upload-demo"action="":on-preview="handlePreview":on-remove="handleRemove":before-remove="beforeRemove"multiple:on-success="handleSuccess":on-error="handleError":on-change="handelChange":limit="3":on-exceed="handleExceed":file-list="fileList"><el-buttonsize="small"type="primary">点击上传</el-button><!-- 用于指定上传文件下的文字说明 --><divslot="tip"class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div></el-upload></template><script>exportdefault{data(){return{//初始化上传列表fileList:[],};},methods:{handelChange(file,fileList){
      console.log("文件修改执行的函数", file, fileList);this.fileList=fileList;},handleRemove(file, fileList){
      console.log("移除文件执行的函数", file, fileList);this.fileList=fileList;},handlePreview(file){
      console.log("点击已经上传的文件", file);},handleSuccess(){this.$message.success("上传成功");},handleError(){this.$message.error("上传失败");},handleExceed(files, fileList){this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`);},beforeRemove(file, fileList){
      console.log('移除之前执行的函数',fileList);returnthis.$confirm(`确定移除 ${file.name}？`);},},};</script><style></style>

手动上传

<template><div><el-upload
      class="upload-demo"
      ref="upload"
      action="":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":on-change="handelChange"
      name="cover":multiple="true":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><div slot="tip"class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div></el-upload><el-button @click="handelSend">上传</el-button></div></template><script>exportdefault{data(){return{fileList:[],};},methods:{handelChange(file, fileList){this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);},handleRemove(file, fileList){
      console.log("移除文件执行的函数", file, fileList);this.filesList = fileList;},handlePreview(file){
      console.log("点击已经上传的文件", file);},handleExceed(files, fileList){this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`);},beforeRemove(file, fileList){
      console.log("移除之前执行的函数", fileList);returnthis.$confirm(`确定移除 ${file.name}？`);},handelSend(){this.$refs.upload.submit();},},};</script><style></style>

手动上传只是手动触发一下上传的事件并没有特别的地方

自定义上传方式

在平常的开发中我们经常会有 上传图片的需求，然而仅仅使用element-ui上给我们的案例的话，并不能满足全部的开发场景（例如上传文件的同时还需要上传多个其他数据），所以我们就需要自定义上传方式，同时官方文档中也给了我们自定义的方式，但是我们这里的例子跟官方文档给我们的例子并不是完全一样

这里为了说明一些细节，我们就采用多文件上传，并上传其他参数，最终点击确定按钮的时候在上传文件的方式来说明问题

实现多文件上传的方式有两种，这两种方式大概都差不多，只不过有一种方式有一个细节需要我们注意一些

方式一(利用fileList)

<template><div><el-upload
      class="upload-demo"
      ref="upload"
      action="":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":on-change="handelChange"
      name="cover":multiple="true":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><div slot="tip"class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div></el-upload><el-button @click="handelSend">上传</el-button></div></template><script>exportdefault{data(){return{fileList:[],};},methods:{handelChange(file, fileList){this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);},handleRemove(file, fileList){
      console.log("移除文件执行的函数", file, fileList);this.filesList = fileList;},handlePreview(file){
      console.log("点击已经上传的文件", file);},handleExceed(files, fileList){this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`);},beforeRemove(file, fileList){
      console.log("移除之前执行的函数", fileList);returnthis.$confirm(`确定移除 ${file.name}？`);},handelSend(){
      console.log("上传文件",this.fileList);//   这里需要判断一下文件大小或者类型//   自定义上传就需要我们使用fromdata对象来上传文件let formdata =newFormData();for(let i =0; i <this.fileList.length; i++){// 我们上传的文件保存在每个文件对象的raw里边
        formdata.append("file",this.fileList[i].raw);}//   添加其他属性
      formdata.append("something","something");// 发送请求},},};</script><style></style>

方式二(利用官方提供的http-request函数)

利用官方提供的http-request函数自定义上传的话我们需要利用到官方给我们提供的手动上传的一个方式submit方法,同时我们还有一个特别注意的点就是http-request函数执行的次数，具体的我们看下边的代码

<template><div><el-upload
      class="upload-demo"
      ref="upload"
      action="":on-preview="handlePreview":on-remove="handleRemove":file-list="fileList":on-change="handelChange":http-request="uploadFile"
      name="cover":multiple="true":auto-upload="false"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><div slot="tip"class="el-upload__tip">
        只能上传jpg/png文件，且不超过500kb
      </div></el-upload><el-button @click="handelSend">上传</el-button></div></template><script>exportdefault{data(){return{fileList:[],};},methods:{handelChange(file, fileList){this.fileList = fileList;
      console.log("文件修改执行的函数", file, fileList);},handleRemove(file, fileList){
      console.log("移除文件执行的函数", file, fileList);this.filesList = fileList;},handlePreview(file){
      console.log("点击已经上传的文件", file);},handleExceed(files, fileList){this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`);},beforeRemove(file, fileList){
      console.log("移除之前执行的函数", fileList);returnthis.$confirm(`确定移除 ${file.name}？`);},// 方法二handelSend(){let formdata =newFormData();//   定义一个fromdata对象用于this.formdata = formdata;//   触发提交文件(执行submit()这个函数会根据有多少个文件就执行多少次http-requests所绑定的函数)this.$refs.upload.submit();this.formdata.append("something","something");//   发送请求,这里上传的的是this.fromdata而不是this.fileList},uploadFile(file){// 判断文件
      console.log("自定义上传文件", file);this.formdata.append("file", file.file);},},};</script><style></style>

需要注意的是我们自定义上传的方式并不会触发上传失败和上传成功的函数，所以需要我们自己根据上传情况手动调用

总结

以上就是我上传文件的一些分享。另外给大家分享一下按需引入的小技巧，对于初学者的我们来说有时候按需引入并不知道引入什么，一般情况下我们引入的是官方文档中el后边的东西，然后我就发现官方文档的左边导航栏的字母正好就是我们按需引入的所要引入的东西（当然有时候我们不仅需要引入导航栏的字母也需要我们引入el后边的东西），而有些是通过this.$xxx的方式调用的，这篇博客也差不多包含了需要这种调用的全部东西了。

这周的分享就到这里了，下周继续努力吧！！！！