<el-form-item label="上传附件:">
<el-upload
ref="upload"
class="upload-demo"
action=""
:file-list="fileList"
:limit="1"
:auto-upload="false"
:before-upload="beforeUploadFile"
:http-request="httpRequest"
>
<el-button slot="trigger" size="small" type="primary" :disabled="submitDisable">上传附件</el-button>
<span slot="tip" class="el-upload__tip ml10">可上传jpg/jpeg/png/pdf/word/excel等格式文件且大小限5M以内</span>
</el-upload>
</el-form-item>
<el-divider/>
<el-form-item class="tc mt20" label-width="0">
<el-button type="primary" :disabled="submitDisable" @click="submitForm()">保存</el-button>
</el-form-item>
submitDisable: false,
file: {}
// 上传文件之前的钩子
beforeUploadFile(file) {
this.submitDisable = true
const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
const accord = extension === 'jpg' ||
extension === 'jpeg' ||
extension === 'png' ||
extension === 'pdf' ||
extension === 'doc' ||
extension === 'docx' ||
extension === 'xls' ||
extension === 'xlsx'
const isLt5M = file.size / 1024 / 1024 < 5
if (!accord) {
this.$message.error('文件格式不正确,请上传.jpg/.jpeg/.png/.pdf/.doc/.docx/.xls/.xlsx文件类型!')
this.submitDisable = false
}
if (!isLt5M) {
this.$message.error('上传附件大小不能超过5MB!')
this.submitDisable = false
return false
}
return accord && isLt5M
},
handleRemove(file, fileList) {
this.submitDisable = false
},
// 自定义的提交函数,取出文件设置进请求参数
httpRequest(param) {
this.file = {
file: param.file,
name: param.name
}
},
async submitUpload() {
await this.$refs.upload.submit()
const formData = new FormData()
formData.append('file', this.file.file)
const config = {
header: {
Authorization: getToken()
}
}
await axios.post('/api/Minio/UploadFile?folderPath=estate/parkingspace', formData, config)
.then(res => {
this.$set(this.ruleForm, 'files', res.data.data.pathName)
})
},
// 保存
submitForm() {
this.submitUpload().then(() => {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit('submit', this.ruleForm)
} else {
return false
}
})
})
},
element上传确认统一提交
于 2023-02-01 18:49:36 首次发布
该段代码展示了如何在Vue.js中使用ElementUI组件进行文件上传的配置,包括限制上传文件类型(如jpg,jpeg,png,pdf等)和大小(5MB以内),以及自定义上传前的验证和错误提示。文件上传成功后,会将其路径添加到表单数据中。
摘要由CSDN通过智能技术生成