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

这篇文章的目的

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

upload 核心参数说明

1. action 上传的地址
2. accept 接受上传的文件类型
3. multiple 是否开启多文件上传模式
4. limit 限制上传个数
5. fileList 文件列表
6. 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>

js

   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>