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>
|