118 lines
3.5 KiB
Vue
118 lines
3.5 KiB
Vue
<template>
|
||
<el-upload
|
||
class="upload-demo"
|
||
:action="actionUrl"
|
||
:on-preview="handlePreview"
|
||
:on-remove="handleRemove"
|
||
:before-remove="beforeRemove"
|
||
:multiple="multiple"
|
||
:limit="limit"
|
||
:on-exceed="handleExceed"
|
||
:file-list="fileList"
|
||
:headers="headers"
|
||
:on-success="handleSuccess"
|
||
:data="uploadData"
|
||
:before-upload="beforeUpload"
|
||
>
|
||
<slot name="default">
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
</slot>
|
||
<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
|
||
</el-upload>
|
||
</template>
|
||
|
||
<script>
|
||
import { getToken } from '@/utils/auth'
|
||
export default {
|
||
name: 'UploadFile',
|
||
props: {
|
||
fileList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
actionUrl: {
|
||
type: String,
|
||
default: 'https://jsonplaceholder.typicode.com/posts/',
|
||
},
|
||
limit: {
|
||
type: Number,
|
||
default: 3,
|
||
},
|
||
// uploadTip: {
|
||
// type: String,
|
||
// default: '只能上传jpg/png文件，且不超过500kb'
|
||
// },
|
||
multiple: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
uploadImgUrl:
|
||
process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
|
||
headers: {
|
||
Authorization: 'Bearer ' + getToken(),
|
||
},
|
||
uploadData: {
|
||
fileType: 'ma',
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
handleRemove(file, fileList) {
|
||
this.$emit('remove', file, fileList)
|
||
},
|
||
handleSuccess(response, file, fileList) {
|
||
this.$emit('success', response, fileList)
|
||
},
|
||
handlePreview(file) {
|
||
this.$emit('preview', file)
|
||
},
|
||
handleExceed(files, fileList) {
|
||
// this.$message.warning(
|
||
// `当前已选择 ${this.limit} 个文件，本次选择了 ${
|
||
// files.length
|
||
// } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
||
// )
|
||
// this.$emit('exceed', files, fileList)
|
||
|
||
this.$message.error(`最多只能上传${this.limit}个文件！`)
|
||
},
|
||
beforeRemove(file, fileList) {
|
||
// return this.$confirm(`确定移除 ${file.name} ？`)
|
||
// .then(() => {
|
||
// this.$emit('before-remove', file, fileList)
|
||
// })
|
||
// .catch(() => {})
|
||
},
|
||
beforeUpload(file) {
|
||
const isJPGorPNG =
|
||
file.type == 'image/png' ||
|
||
file.type == 'image/jpg' ||
|
||
file.type == 'image/jpeg' ||
|
||
file.type == 'application/pdf' ||
|
||
file.type ==
|
||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||
file.type == 'application/msword'
|
||
const isLt5M = file.size / 1024 / 1024 < 10 // 小于 5MB
|
||
if (!isJPGorPNG) {
|
||
this.$message.error(
|
||
'只能上传 jpg、jpeg、png 、.pdf、.doc、.docx 格式的文件！',
|
||
)
|
||
}
|
||
if (!isLt5M) {
|
||
this.$message.error('上传图片大小不能超过 10MB')
|
||
}
|
||
return isJPGorPNG && isLt5M
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.upload-demo .el-upload__tip {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|