目标：实现文件上传功能
原型图：
HTML部分：
<div class="invoice-item">
<div class="invoice-title">增值税专用发票</div>
<div class="invoice-box">
<el-form-item label="标准模版：" class="Standard-Template">
<div v-show="!isEdit && !ruleForm.taxInvoiceTemplateUrl">
<span>待上传</span>
</div>
<div v-show="isEdit && !ruleForm.taxInvoiceTemplateUrl">
<input
ref="taxInvoiceTemplateRef"
type="file"
style="
opacity: 0;
position: absolute;
left: -9999px;
top: -9999px;
"
@change="taxInvoiceTempalteChange"
>
<i
class="el-icon-upload2"
style="color: #0075ff; font-size: 22px; cursor: pointer"
@click="$refs.taxInvoiceTemplateRef.click()"
/>
<span
style="margin-left: 8px"
:style="{ color: errorText3 ? 'red' : '#999999' }"
>{{ errorText3 || "支持上传5M以内.pdf格式的文档" }}</span>
</div>
<div v-show="ruleForm.taxInvoiceTemplateUrl">
<i class="el-icon-document" />
<span>{{ ruleForm.taxInvoiceTemplateName }}</span>
<i
v-if="isEdit"
class="el-icon-circle-close"
style="cursor: pointer"
@click="deleteDoc('taxDigitalInvoice')"
/>
</div>
</el-form-item>
<el-form-item
label="备注信息超长模板："
class="Standard-Template"
>
<div
v-show="!isEdit && !ruleForm.taxInvoiceRemarkTemplateUrl"
>
<span>待上传</span>
</div>
<div
v-show="isEdit && !ruleForm.taxInvoiceRemarkTemplateUrl"
>
<input
ref="taxInvoiceRemarkTemplateRef"
type="file"
style="
opacity: 0;
position: absolute;
left: -9999px;
top: -9999px;
"
@change="taxInvoiceRemarkTemplateChange"
>
<i
class="el-icon-upload2"
style="
color: #0075ff;
font-size: 22px;
cursor: pointer;
padding-top: 10px;
"
@click="$refs.taxInvoiceRemarkTemplateRef.click()"
/>
<span
style="margin-left: 0px; padding-top: 3px"
:style="{ color: errorText4 ? 'red' : '#999999' }"
>{{ errorText4 || "支持上传5M以内.pdf格式的文档" }}</span>
</div>
<div v-show="ruleForm.taxInvoiceRemarkTemplateUrl">
<i class="el-icon-document" />
<span>{{ ruleForm.taxInvoiceRemarkTemplateName }}</span>
<i
v-if="isEdit"
class="el-icon-circle-close"
style="cursor: pointer"
@click="deleteDoc('taxDigitalInvoiceRemarkInfo')"
/>
</div>
</el-form-item>
</div>
</div>JS部分：
import * as Api from '@/api/invoiceBasic'
data() {
return {
errorText3: '',
errorText4: '',
ruleForm: {
// 数电发票基础模板
taxInvoiceTemplateUrl: '', // 增值税 标准模板
taxInvoiceTemplateName: '',
taxInvoiceRemarkTemplateUrl: '',
taxInvoiceRemarkTemplateName: '',
sellerShowAccount: '0',
invoiceOperator: ''
},
rules: {
invoiceOperator: [
{ required: true, message: '请输入开票人', trigger: 'submit' }
]
}
}
},
methods: {
init() {
this.getDetailData()
},
getDetailData() {
this.pageLoading = true
Api.ticketConfigFind()
.then((res) => {
const {
taxInvoiceTemplateUrl, taxInvoiceTemplateName,
taxInvoiceRemarkTemplateUrl, taxInvoiceRemarkTemplateName,
sellerShowAccount, invoiceOperator
} = res.data.body
this.ruleForm.taxInvoiceTemplateUrl = taxInvoiceTemplateUrl
this.ruleForm.taxInvoiceTemplateName = taxInvoiceTemplateName
this.ruleForm.taxInvoiceRemarkTemplateUrl = taxInvoiceRemarkTemplateUrl
this.ruleForm.taxInvoiceRemarkTemplateName = taxInvoiceRemarkTemplateName
// this.ruleForm.taxInvoiceTemplateUrl = taxInvoiceTemplateUrl
// this.ruleForm.taxInvoiceTemplateName = taxInvoiceTemplateName
// this.ruleForm.ordinaryInvoiceTemplateUrl = ordinaryInvoiceTemplateUrl
// this.ruleForm.ordinaryInvoiceTemplateName =
// ordinaryInvoiceTemplateName
this.ruleForm.invoiceOperator = invoiceOperator
this.ruleForm.sellerShowAccount = String(Number(sellerShowAccount))
})
.finally((_) => {
this.pageLoading = false
})
},
// 增值税专用发票 标准模板
taxInvoiceTempalteChange(e) {
const file = e.target.files[0]
if (file.name.indexOf('.pdf') === -1 || file.size > 5 * 1024 * 1000) {
this.errorText3 = '支持上传5M以内.pdf格式的文档'
return
}
const f2 = new FormData()
f2.append('file', file)
Api.fastdfsUpload(f2).then((res) => {
this.ruleForm.taxInvoiceTemplateName = file.name
this.ruleForm.taxInvoiceTemplateUrl = res.data.body
})
},
// 增值税专用发票 - 备注信息超长
taxInvoiceRemarkTemplateChange(e) {
const file = e.target.files[0]
if (file.name.indexOf('.pdf') === -1 || file.size > 5 * 1024 * 1000) {
this.errorText4 = '支持上传5M以内.pdf格式的文档'
return
}
const f3 = new FormData()
f3.append('file', file)
Api.fastdfsUpload(f3).then((res) => {
this.ruleForm.taxInvoiceRemarkTemplateName = file.name
this.ruleForm.taxInvoiceRemarkTemplateUrl = res.data.body
})
},
}，CSS部分：
.invoice-item {
float: left;
width: 430px;
height: 140px;
// height: 126px;
border-radius: 12px;
margin-top: 12px;
margin-bottom: 22px;
background: linear-gradient(to right, #cfe8ff, #f8fcff);
.invoice-box {
width: 100%;
.remark-Template {
/deep/ .el-form-item {
margin-bottom: 0px;
}
}
/deep/ .el-form-item__label {
width: fit-content !important;
padding-left: 20px;
font-weight: 600;
font-size: 12px;
color: #101010;
}
/deep/ .el-form-item__content {
text-align: right;
padding-right: 20px;
margin-left: 180px !important;
}
}
}
.invoice-title {
font-weight: 600;
font-size: 16px;
color: #0075ff;
padding: 20px;
padding-bottom: 8px;
}
效果：
