效果图
html代码:
<template>
//intl是引入的函数,主要功能是进行标题的中英文转换,formData是一个json文件中引入的
<div title>{{ intl(formData['resume']) }}</div>
<div>
//注意这个input类型,是为了点击之后打开本地文件夹;accept是限制选择的文件类型只能是pdf;
<input type="file"
accept="application/pdf"
ref="fileInput"
style="display:none">
//这里的v-if是为了判断是否有选择文件,如果选择则显示文件名
<div class="file_message"
v-if="resumeName !== ''">
//这里显示前面pdf图标
<div class="img"><i class="fas fa-file-pdf"></i></div>
<div class="content">
<span class="file_name">{{resumeName}}</span>
<div class="file_size">{{fileSize}}</div>
<span class="operation"
style="
display:flex;
position: absolute;
right: 0.5em;
bottom: 0.5em;
font-size: 0.6em;">
//Button是引用其他的一个组件
<Button :type="['', 'blue'].join(' ')"
:name="
intl({
'en-US': 'Reselect',
'zh-CN': '重新选择',
})
"
@click="uploadFile"
/>
<Button :type="['', 'red'].join(' ')"
:name="
intl({
'en-US': 'Delete',
'zh-CN': '删除',
})
"
@click="deleteFile" />
</span>
</div>
</div>
//和上面的v-if相对应
<div class="upload"
v-else
@click="uploadFile">
<i></i>
<span>
{{
intl({
"en-US": "Select file (maximum 10M)",
"zh-CN": "选择文件(最大限10M)",
})
}}
</span>
</div>
</div>
</template>
css代码:
<style scoped>
.upload {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 7em;
padding: 0;
border-radius: 5px;
background-color: var(--gray-background);
color: var(--gray-bright);
}
.upload i {
width: 2.5em;
height: 2.5em;
margin: 0.5em auto 0.3em;
background: url(https://s1.wenjuan.com/static/img/q_upload_file/upload-pc.svg) no-repeat;
}
.upload span {
font-size: 0.8em;
color: var(--gray);
opacity: 0.5;
}
.file_message {
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
background-color: var(--gray-background);
padding: 1em;
border: 1px solid var(--gray-border);
border-radius: 5px;
}
.file_message .img {
font-size: 2.8em;
color: var(--gray);
padding-right: 0.5em;
}
.file_name {
font-size: 1.2em;
color: var(--gray);
}
.file_size {
margin-top: 0.5em;
font-size: 0.8em;
color: var(--gray);
opacity: 0.6;
}
</style>
js代码:
<script>
import { intl } from '/util/env.js'
import { formData } from '/apply/formData.json'
export default {
//向上传递update函数
emits: ['update'],
data() {
return {
formData,
resumeName: '',
fileSize: '',
fileType: '',
}
},
methods: {
uploadFile() {
let fileInput = this.$refs.fileInput
fileInput.click()
fileInput.onchange = () => {
let file = fileInput.files[0]
let resumeSize = file.size
if (resumeSize / (1024 * 1024) > 10) {
alert('限制10MB以内')
return false
} else {
if (resumeSize >= 1024 && resumeSize < 1048576) {
this.fileSize = parseFloat((resumeSize / 1024).toFixed(2)) + 'KB'
} else if (resumeSize >= 1048576) {
this.fileSize = parseFloat((resumeSize / 1048576).toFixed(2)) + 'M'
} else {
this.fileSize = parseFloat(resumeSize.toFixed(2)) + 'B'
}
}
this.resumeName = file.name
console.log(file)
}
},
update(fileInput = false) {
if (!fileInput) {
this.$refs.fileInput.blur()
} else {
this.$emit('update', this.$refs.fileInput.files[0])
}
},
deleteFile() {
this.resumeName = ''
},
intl,
},
}
</script>