vue 弹框组件封装, excel,xlsx,xls 多文件上传
一. 为什么要使用弹框
在一个页面当中,通常会因为各种要展示数据填满了用户视图(view),当前界面会显的寸土寸金,或者当前界面需要新增一个小的功能而不需要重新增加页面,造成代码冗余,如此一来弹框就派上了用场了!
二.新建一个upload.vue 文件 在父组件内部去引入这个文件(单文件上传)
-
<template>
-
<el-dialog
-
title="上传文件"
-
:close-on-click-modal="false"
-
@close="closeHandle"
-
:visible.sync="commonUploadvisible"
-
>
-
-
/*
-
accept 认证的文件类型 这里的multiple 一般关掉,多选的时候是一个一个上传的
-
会发送多个请求 如果文件依次上传的过多会造成服务器,会给公司服务器造成过多的负荷,
-
当然也可以使用limit 属性去限制数量,不过我个人不建议使用
-
} */
-
<el-upload
-
drag
-
accept=""
-
:action="url"
-
:before-upload="beforeUploadHandle"
-
:on-success="successHandle"
-
:headers="headers"
-
:data="{ namespace: classifyUploadFlag.namespace}"
-
:multiple="false"
-
:file-list="fileList"
-
style="text-align: center"
-
>
-
<i class="el-icon-upload"></i>
-
<div class="el-upload__text">
-
将文件拖到此处,或
-
<em>点击上传</em>
-
</div>
-
<div class="el-upload__tip" slot="tip">只支持.xlsx. xls格式的文件!</div>
-
</el-upload>
-
</el-dialog>
-
</template>
-
-
<script>
-
import local from '@/local/loacl'
-
export default {
-
data() {
-
return {
-
commonUploadvisible: false,
-
// 父组件传递过来的 url
-
url: uploadUrl || this.HOST '/dict/classify/import',
-
beforeNum: 0,
-
successNum: 0,
-
fileList: [],
-
headers: {
-
token: JSON.parse(local.get('Token'))
-
}
-
}
-
},
-
props: {
-
classifyUploadFlag: {
-
type: Object,
-
default: () => {}
-
},
-
uploadUrl:{
-
type: String,
-
default: ''
-
}
-
},
-
-
methods: {
-
// 上传之前
-
beforeUploadHandle(file) {
-
const TYPE = ['xls', 'xlsx']
-
const extension = TYPE.includes(file.name.split('.')[1])
-
-
const isLt2M = file.size / 1024 / 1024 < 5
-
-
if (!extension) {
-
this.$message.error('上传模板只能是 xls、xlsx格式!')
-
}
-
-
if (!isLt2M) {
-
this.$message.error('上传模板大小不能超过 5MB!')
-
}
-
this.beforeNum
-
return extension && isLt2M
-
},
-
// 上传成功
-
successHandle(response, file, fileList) {
-
this.fileList = fileList
-
this.successNum
-
// response &&
-
-
console.log(response, file, fileList)
-
if (response.code === 1000) {
-
if (this.beforeNum=== this.successNum) {
-
this.$confirm('操作成功, 是否继续操作?', '提示', {
-
confirmButtonText: '确定',
-
cancelButtonText: '取消',
-
type: 'warning'
-
}).catch(() => {
-
this.$emit('refreshDataUpload', false)
-
})
-
}
-
} else if (response.code === 0) {
-
this.$message.error(response.message)
-
}
-
},
-
// 弹窗关闭时
-
closeHandle() {
-
this.fileList = []
-
this.$emit('refreshDataUpload', false)
-
}
-
}
-
}
-
</script>
三.多文件上传
1.多文件上传时不再需要 before 和 success 的钩子函数了只需要 :on-change="handleChange"
2.配合limit 属性 以及 ::on-exceed钩子进行配合使用
3.修改参数后,统一上传.
-
<template>
-
<div class="uploadList">
-
<el-dialog
-
:before-close="handleClose"
-
:visible.sync="uploadVisible"
-
title="批量上传"
-
width="40%"
-
>
-
// :auto-upload="false" 禁止自动上传改为手动上传,
-
<div class="uploadListinner">
-
<el-upload
-
ref="upload"
-
:action="uploadUrlList"
-
:auto-upload="false"
-
-
:limit="20"
-
:on-change="handleChange"
-
accept=".jpg,.jpeg"
-
class="upload-demo"
-
drag
-
multiple
-
>
-
<i class="el-icon-upload"></i>
-
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
-
<div slot="tip" class="el-upload__tip">
-
只能上传jpg/jpeg文件,且不超过5MB
-
<div v-if="idCardSubTittle">
-
<br>图片命名规范:使用身份证号
-
<br>PS:123456789111111
-
</div>
-
</div>
-
</el-upload>
-
</div>
-
<span slot="footer" class="dialog-footer">
-
<el-button @click="cancle()">取 消</el-button>
-
<el-button type="primary" @click="uploadFile">确 定</el-button>
-
</span>
-
</el-dialog>
-
</div>
-
</template>
-
-
<script>
-
-
import { uploads} from '@/api/uploads'
-
export default {
-
props: {
-
uploadVisible: {
-
type: Boolean,
-
default: () => false
-
}
-
},
-
data() {
-
return {
-
-
fileList: [],
-
uploadUrl: process.env.VUE_APP_VIDEO_UPLOADS,
-
}
-
},
-
methods: {
-
cancle() {
-
this.$emit('handlerClickVisible', false)
-
this.$refs.upload.clearFiles()
-
this.fileList = []
-
},
-
handleClose(done) {
-
this.$emit('handlerClickVisible', false)
-
this.$refs.upload.clearFiles()
-
this.fileList = []
-
done()
-
},
-
// 选择文件时,往fileList里添加
-
handleChange(fileList) {
-
const isJpgOrPng =
-
fileList.raw.type === 'image/jpeg' || fileList.raw.type === 'image/jpg'
-
let isLt2M = fileList.size / 1024 / 1024 < 5 // 判定图片大小是否小于5MB
-
if (!isLt2M) {
-
this.fileList = []
-
return this.$message.error('上传头像图片大小不能超过5MB')
-
}
-
if (!isJpgOrPng) {
-
this.fileList = []
-
return this.$message.error('上传头像图片只能是 JPG格式!')
-
}
-
this.fileList.push(fileList)
-
console.log(fileList, this.fileList, fileList.raw.type, isJpgOrPng, 67)
-
},
-
//uploadFile
-
uploadFile() {
-
if (!this.fileList.length) return this.$message.error('未选取文件')
-
// NEW 一个表单文件对象,
-
let formData = new FormData()
-
this.fileList.forEach((item) => {
-
formData.append('files', item.raw)
-
})
-
uploads({
-
method: 'post',
-
/* url: this.uploadUrl, 可以reset url,看情况而定 */
-
headers: { 'content-type': 'multipart/form-data;charset=utf-8' },
-
data: formData
-
})
-
.then(async (res) => {
-
if (res.data.code === '500') {
-
return this.$message.error(res.data.msg)
-
}
-
if (res.data.code === '200') {
-
const data = await saveFiles(res.data.data)
-
if (data.code !== '200') return this.$message.error('上传失败!')
-
console.log(data, 'filereq')
-
this.$confirm('批量上传成功, 是否继续?', '提示', {
-
confirmButtonText: '继续',
-
cancelButtonText: '取消',
-
type: 'success'
-
})
-
.then(() => {
-
this.$refs.upload.clearFiles()
-
this.fileList = []
-
})
-
.catch(() => {
-
this.$emit('handlerClickVisible', false)
-
this.$refs.upload.clearFiles()
-
this.fileList = []
-
})
-
}
-
})
-
.catch((err) => {
-
console.log(err)
-
})
-
// axios({}).then(res=>{
-
// console.log(res)
-
// }
-
}
-
}
-
}
-
</script>
-
-
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfibceg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24