山西太原建站怎么做,WordPress移动端加搜索,wordpress首页悬浮框,青岛网站建设的方案这篇文章的目的 将文件上传的方法封装一下#xff0c;供大家统一调用, 话不多说#xff0c;直接上代码 upload 核心参数说明 action 上传的地址accept 接受上传的文件类型multiple 是否开启多文件上传模式limit 限制上传个数fileList 文件列表disabled 是否禁用 upload 核心方…这篇文章的目的 将文件上传的方法封装一下供大家统一调用, 话不多说直接上代码 upload 核心参数说明 action 上传的地址accept 接受上传的文件类型multiple 是否开启多文件上传模式limit 限制上传个数fileList 文件列表disabled 是否禁用 upload 核心方法说明 before-upload 上传文件之前的钩子.on-success 上传成功的钩子函数on-error 文件上传失败时的钩子on-exceed 文件超出个数限制时的钩子on-remove 文件列表移除文件时的钩子on-preview 点击文件列表中已上传的文件时的钩子.on-progress 文件上传时的钩子 进度条展示的基础 核心局部代码说明
html中
插槽的使用
子组件 slot nameuploadBtn/slot调用上传组件的父组件 uploadBtntemplate v-slotuploadBtnimg srchttp://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}sid4AC67ADB4E264AB0A8B899A671072875))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-ifshowProcessFlagprocessFlag :percentageloadProcess/el-progressjs onProgressFn(event, file, fileList){this.processFlag truethis.loadProcess event.percent.toFixed(2)if(this.loadProcess100){this.loadProcess 100this.$nextTick((){this.processFlag false})}}说明 用户启用了进度条showProcessFlag为true) 并且 processFlag的值为true当进度条的值存在并且小于100时当进度大于等于100时需要隐藏进度条为了保险起见此处加了 $nextTick当然了setTimeout((){},0)也可以 templatediv!--action/api/abk/web/v1/resource/file --el-upload:actionactionUrlstylewidth: 100%:on-success(response, file) successUpload(response, file):on-errorerrorUpload:acceptacceptTypeList.join(|):before-uploadbeforeUpload:multiplemultiple:limitmaxLimit:on-exceedhandleExceed:file-listfileList:disableddisabledFlag:on-remove(file, fileList) removeFile(file, fileList):on-preview(file) preview(file):on-progress(event, file, fileList)onProgressFn(event, file, fileList)!-- 上传的按钮 或者 icon 通过具名插槽的方式 --slot nameuploadBtn/slot/el-uploadel-progress v-ifshowProcessFlagprocessFlag :percentageloadProcess/el-progress/div
/templatescript
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}sid4AC67ADB4E264AB0A8B899A671072875))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.loadProcess100){this.loadProcess 100this.$nextTick((){this.processFlag false})}}},
}
/scriptstyle langscss scoped
/styleList){this.processFlag truethis.loadProcess event.percent.toFixed(2)if(this.loadProcess100){this.loadProcess 100this.$nextTick((){this.processFlag false})}}},
}
/scriptstyle langscss scoped
/style
