Element el-upload 自定义上传单个指定格式文件

柔情只为你懂 2023-07-05 11:50 7阅读 0赞

后台玩前端，第一次使用VUE+Element。  
对于文件上传这一块折腾了好久才搞定，记个笔记。同时帮助需要的人。

VUE代码如下：

<el-upload
       class="upload-demo"
       ref="upload-demo"
       action="http://localhost"
       accept=".xlsx,.xls"
       :limit="2"
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       :on-exceed="handleExceed"
       :on-change="handleChange"
       :file-list="fileList"
       :before-upload="beforeUpload"
       :before-remove="beforeRemove"
       :http-request="doUpload"
       :on-success="handleSuccess"
       :on-error="handleError"
       :auto-upload="false">
     	<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     	<el-button size="small" type="success" @click="submitUpload">上传</el-button>
     	<div slot="tip" class="el-upload__tip">请选择 Execl 文件，然后点击上传。</div>
     </el-upload>

关键点：

1.  由于自定义了上传方法，因此 action 随便填写一个。原因参见第5点。
2.  accept 指定了可选的文件类型，让OS帮你过滤掉不可选的文件。也可以不指定，推迟到before-upload()事件里自己做文件的限定检查。目录下文件比较多的情况下，推荐指定。
3.  limit 限定选择的文件个数，由于这里只允许一个上传一个文件，并支持更新所以设定2个。大于2也可以。
4.  file-list 用于存储选择的文件列表。通过变更可以实现列表的动态变化。这里通过覆盖写实现选择文件的更新。
5.  http-request 这个属性是这里的关键设置，它指定了自定义的上传方法。如果没有设定，那么控件会使用 action 触发上传。
6.  on-success, on-error 实现自定义的上传成功和失败的回调。

脚本如下：

<script>
    export default { 
      data () { 
        return { 
          fileList: [], //上传的文件列表
        }
      },
      methods: { 
        // 删除选择的文件时触发
        handleRemove (file, fileList) { 
          console.log(file, fileList)
        },
        // 点击文件时触发
        handlePreview (file) { 
          console.log(file)
        },
        // 当选择文件个数超过指定 limit 时触发；这里只上传一个文件，指定了 limit="2"，也可以不指定limit，则无限制
        handleExceed (files, fileList) { 
          this.$message.warning(`已选择了 ${ files.length} 个文件，如需更新请先删除已选择文件`)
          console.log(files)
        },
        //当重新选择文件时，替换已选择的文件，从而实现变更要上传的文件，保证上传列表中只有一个文件；limit要大于2，否则只会触发onExceed，而不执行onChange
        handleChange(files, fileList) { 
          this.fileList = [files]
        },
        //上传成功的自定义callback
        handleSuccess (response, file, fileList) { 
          //清空文件列表
          this.$refs.uploadClass.clearFiles()
          this.$message({ 
            showClose: true,
            message: '上传成功',
            type: 'success'
          })
        },
        //上传失败的自定义callback
        handleError (err, file, fileList) { 
          this.$message({ 
            showClose: true,
            message: file.name + ' 上传失败,' + JSON.stringify(err),
            type: 'error'
          })
        },
        //点击删除文件时触发删除确认提醒
        beforeRemove (file, fileList) { 
          return this.$confirm(`确定移除 ${ file.name}？`)
        },
        //上传前的触发，可以在这里对文件大小，类型等检测
        beforeUpload (file) { 
          if (file.size > 1024 * 1024) { 
            this.$message.warning('上传的文件大于1Mb，请静心等待！')
          }
        },
        //自定义上传接口
        doUpload (param) { 
          //上传到腾讯云cos,
          cos.putObject({ 
            Bucket: "",
            Region: ""
            Key: param.file.name,
            StorageClass: 'STANDARD',
            Body: param.file,
            onProgress: function (progressData) { 
              //显示上传进度，采用百分制。
              param.file.percent = progressData.percent * 100
              //进度条
              param.onProgress(param.file)
            }
          }, function (err, data) { 
            if (data && data.statusCode === 200) { 
              //callback我们自定义的handleSuccess
              param.onSuccess(data)
            } else { 
              //callback 我们自定义的handleError
              param.onError(data)
            }
          })
          //自己的post请求可以使用axios
          /*this.axios({ method: 'post', url: '服务地址', data: param.file, }).then(res => { if (res.status === 200) { } }).catch(err => { console.log(err) })*/
        },
        //上传
        submitUpload () { 
          this.$refs.uploadDemo.submit()
        },
    }
    </script>

重点说明

1.  进度条的显示一定要设定 param.file.percent 并执行 param.onProgress(param.file) 否则，进度条不显示进度。
2.  进度条的百分比使用的百分制。百分比可以使用file的参数计算得出。

摸石头过河，总算跑起来了！  
更多细节参看官方文档 [Element upload][]

[Element upload]: https://element.eleme.cn/#/zh-CN/component/upload

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue结合element实现自定义上传图片、文件

![format_png][] ![format_png 1][]![format_png 1][] ![format_png 2][] [format_png]:

不念不忘少年蓝@/ 2023年07月11日 05:46/ 0 赞/ 28 阅读

相关 Element el-upload 自定义上传单个指定格式文件

后台玩前端，第一次使用VUE+Element。对于文件上传这一块折腾了好久才搞定，记个笔记。同时帮助需要的人。 VUE代码如下： <el-upload

柔情只为你懂/ 2023年07月05日 11:50/ 0 赞/ 8 阅读

相关 element-ui自定义文件上传

小哥今天心情好在抄一篇文章啦啦啦！ html name上传文件参数名 files data 上传参数 <el-upload ref="upload

我不是女神ヾ/ 2023年02月19日 07:29/ 0 赞/ 27 阅读

相关 springboot上传单个文件，多个文件以及文件和表单数据同时提交

一直有小伙伴不知道springboot项目的文件上传功能，今天我们就来搞懂它，读完本篇文章你可以知道以下内容 1. 单个文件上传 2. 多个文件上传 3. 文件与for

小咪咪/ 2023年02月17日 02:26/ 0 赞/ 20 阅读

相关自定义element的el-upload文件上传请求

自定义element的el-upload文件上传请求 <template> <el-upload action="/ws-truck/me

太过爱你忘了你带给我的痛/ 2022年11月17日 13:41/ 0 赞/ 150 阅读

相关普元EOS：文件上传单个文件或多选文件上传

前言因为普元里面nui其实就是搞得miniui就先找了找miniui的api，看到了FileUpload，但是FileUpload文件上传控件，基于FLASH的swfu

偏执的太偏执、/ 2022年10月10日 01:46/ 0 赞/ 254 阅读

相关 plupload如何限制上传文件数量，限制只能上传单个文件

1 完整代码 $(function() { $("uploader").pluploadQueue({ ru

Dear 丶/ 2022年07月13日 00:43/ 0 赞/ 432 阅读

相关自定义方法限制上传图片（文件）的格式

import org.apache.catalina.core.ApplicationPart; import org.springframework.web.

水深无声/ 2022年04月16日 00:37/ 0 赞/ 295 阅读

相关 thinkphp上传单文件和多文件

注意：如需自定义上传后的文件名，办法如下：可添加$upload->saveName=‘aa’; aa可为函数和字符串，不能为汉字，如需为汉字，则需修改ThinkPHP/Li

柔情只为你懂/ 2022年02月24日 13:18/ 0 赞/ 216 阅读

相关 vue项目之上传单个文件或者多个文件

一、区别 > 不管是单个文件或者多个文件上传，都是通过后台控制的，接口不一样。 > 目前，单个文件，后台不需要传其他额外的参数，就需要上传文件的信息二、仅上传文

清疚/ 2021年09月17日 09:18/ 0 赞/ 727 阅读