当前位置：首页 > news >正文

vue使用elementUI的upload上传文件封装

news 2025/8/11 2:41:38

这篇文章的目的

将文件上传的方法封装一下，供大家统一调用,
话不多说，直接上代码

upload 核心参数说明

action 上传的地址
accept 接受上传的文件类型
multiple 是否开启多文件上传模式
limit 限制上传个数
fileList 文件列表
disabled 是否禁用

upload 核心方法说明

before-upload 上传文件之前的钩子.
on-success 上传成功的钩子函数
on-error 文件上传失败时的钩子
on-exceed 文件超出个数限制时的钩子
on-remove 文件列表移除文件时的钩子
on-preview 点击文件列表中已上传的文件时的钩子.
on-progress 文件上传时的钩子进度条展示的基础

核心局部代码说明

html中

插槽的使用

子组件

   <slot name="uploadBtn"></slot>

调用上传组件的父组件

    <uploadBtn><template v-slot="uploadBtn"><img src='http://test/upload.img'></img></template></uploadBtn>

说明

使用了具名插槽将上传的按钮放在父组件调用子组件标签的容器中，这样的好处是:随意定制按钮不需要写一堆的条件判断，且可定制上传按钮

js中

office 自动预览的使用

data定义office基础路径

    officeOnlineAddress:'https://view.officeapps.live.com/op/view.aspx?src=',

office基础路径拼接文件路径并预览

   const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)

说明

office基础路径拼接文件路径并用window.open即可实现文件的预览

beforeUpload 上传文件之前的拦截处理

代码

    beforeUpload(file) {const { name = '', size } = fileif (size > this.maxSize * 1024 * 1000) {this.$Message.warning(`文件最大仅支持${this.maxSize}M`)return false}if (!this.acceptTypeList.includes(name.split('.').pop())) {this.$Message.warning(`文件格式仅支持${this.acceptTypeList.join(',')}`)return false}},

说明

文件大小大于父组件传入的maxSize则拦截并提示
文件格式不正确则拦截并提示
beforeUpload函数体中，如果函数的返回值是false，则终止上传

文件预览的操作

代码

    preview (data) {const { url, response = {} } = data || {}let name = data.nameconst downLoadTypeList = this.downLoadTypeListconst preveiwTypeList = this.preveiwTypeListif (!name) {name = ''}const suffixFileType = name.split('.').pop()if (downLoadTypeList.includes(suffixFileType)) {//下载 'doc', 'docx', 'xlsx', 'xls', 'txt' 文件name = name.replace(/&/g, '') // & 不兼容const target = encodeURIComponent(Base64.encode(`${location.origin}/api/abk/web/v1/resource/file?fileId=${url || response.data}&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`))if (this.officePreviewFlag &&this.officeType.includes(suffixFileType)) {// office预览的const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)} else {// 非office预览window.open(`https://test/preview/onlinePreview?url=${target}`,'_blank')}} else if (preveiwTypeList.includes(suffixFileType)) {//新窗口打开 预览图片文件window.open('/api/abk/web/v1/resource/file?fileId=' +(url || response.data),'_blank')}},

说明

使用 name.split(‘.’).pop() 拿到文件的后缀名
根据传入的 downLoadTypeList(需要下载的文件类型)、preveiwTypeList(可以直接预览的文件类型)、officePreviewFlag(office文件类型)以及officePreviewFlag(是否启用office预览)和文件后缀名匹配
需要下载的文件类型根据后端的下载基础路径拼接得到下载地址，并结合windwo.open下载
可以直接预览的文件类型根据后端的预览基础路径拼接得到下载地址，并结合windwo.open 预览
office文件类并且启用了office预览直接调用office预览路径（https://view.officeapps.live.com/op/view.aspx?src=）

进度条处理

html

<el-progress v-if="showProcessFlag&&processFlag" :percentage="loadProcess"></el-progress>

   onProgressFn(event, file, fileList){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}

说明

用户启用了进度条（showProcessFlag为true) 并且 processFlag的值为true（当进度条的值存在并且小于100时）
当进度大于等于100时需要隐藏进度条，为了保险起见，此处加了 $nextTick，当然了setTimeout(()=>{},0)也可以

<template><div><!--action="/api/abk/web/v1/resource/file" --><el-upload:action="actionUrl"style="width: 100%":on-success="(response, file) => successUpload(response, file)":on-error="errorUpload":accept="acceptTypeList.join('|')":before-upload="beforeUpload":multiple="multiple":limit="maxLimit":on-exceed="handleExceed":file-list="fileList":disabled="disabledFlag":on-remove="(file, fileList) => removeFile(file, fileList)":on-preview="(file) => preview(file)":on-progress="(event, file, fileList)=>onProgressFn(event, file, fileList)"><!-- 上传的按钮 或者 icon 通过具名插槽的方式 --><slot name="uploadBtn"></slot></el-upload><el-progress v-if="showProcessFlag&&processFlag" :percentage="loadProcess"></el-progress></div>
</template><script>
export default {name: 'UploadFile',props: {actionUrl: {//上传的地址type: String,default: '',},acceptTypeList: {//接受的文件类型type: Array,default: () => {return []//  ['doc', 'docx', 'xlsx', 'xls', 'txt', 'pdf','jpg','jpeg','png','zip,'rar']},},multiple: {//是否开启多图上传type: Boolean,default: false,},maxLimit: {// 最大上传个数限制type: Number | String,default: 1,},maxSize:{// 文件上传的最大体积 Mtype: Number | String,default: 4,},disabledFlag: {//是否禁用type: Boolean,default: false,},fileList: {//文件列表type: Array,default: () => {return []},},extraData: {}, //上传时的额外参数 如 name等/* {name:'12321'}*/dragFlag: {type: Boolean,default: true, //是否启用拖拽上传 此处默认启用  element 官方默认是 不启用的},downLoadTypeList: {//需要下载的文件类型type: Array,default: () => {return ['doc', 'docx', 'xlsx', 'xls', 'txt']},},preveiwTypeList: {//需要预览的文件类型type: Array,default: () => {return ['pdf', 'jpg', 'jpeg', 'png']},},officePreviewFlag: {//是否启用office在线预览type: Boolean,default: false,},showProcessFlag:{//是否显示进度条type: Boolean,default: false,},},// office预览// https://view.officeapps.live.com/op/view.aspx?src=// https://view.officeapps.live.com/op/view.aspx?src=文档地址//data() {return {officeOnlineAddress:'https://view.officeapps.live.com/op/view.aspx?src=',officeType: ['doc', 'docx', 'xlsx', 'xls'],processFlag:false,//是否显示进度条loadProcess:0//进度条的刻度值}},mounted() {},methods: {// 上传图片 成功successUpload(response, file) {if (response.rt.status === 200) {this.fileList.push({url: response.data,name: file.name,})} else {this.$Message.info(response.data)}},errorUpload(res) {this.$Message.info('上传失败请重试！')},beforeUpload(file) {const { name = '', size } = fileif (size > this.maxSize * 1024 * 1000) {this.$Message.warning(`文件最大仅支持${this.maxSize}M`)return false}if (!this.acceptTypeList.includes(name.split('.').pop())) {this.$Message.warning(`文件格式仅支持${this.acceptTypeList.join(',')}`)return false}},handleExceed(files, fileList) {this.$Message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)},// 移除文件removeFile(file, data) {console.log(file, data)this.fileList = data},// 预览preview (data) {const { url, response = {} } = data || {}let name = data.nameconst downLoadTypeList = this.downLoadTypeListconst preveiwTypeList = this.preveiwTypeListif (!name) {name = ''}const suffixFileType = name.split('.').pop()if (downLoadTypeList.includes(suffixFileType)) {//预览 'doc', 'docx', 'xlsx', 'xls', 'txt' 文件name = name.replace(/&/g, '') // & 不兼容const target = encodeURIComponent(Base64.encode(`${location.origin}/api/abk/web/v1/resource/file?fileId=${url || response.data}&fullfilename=${name}&sid=4AC67ADB4E264AB0A8B899A671072875`))if (this.officePreviewFlag &&this.officeType.includes(suffixFileType)) {// office预览的const preveiewURL = this.officeOnlineAddress + targetwindow.open(preveiewURL)} else {// 非office预览window.open(`https://test/preview/onlinePreview?url=${target}`,'_blank')}} else if (preveiwTypeList.includes(suffixFileType)) {//新窗口打开 预览图片文件window.open('/api/abk/web/v1/resource/file?fileId=' +(url || response.data),'_blank')}},onProgressFn(event, file, fileList){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}},
}
</script><style lang="scss" scoped>
</style>List){this.processFlag = truethis.loadProcess =  event.percent.toFixed(2)if(this.loadProcess>=100){this.loadProcess= 100this.$nextTick(()=>{this.processFlag = false})}}},
}
</script><style lang="scss" scoped>
</style>