实例以element-ui为基础：
html:
<div class="importPDF"> <el-dialog title="PDF数据导入" :visible.sync = showDataImportDialog center width="35%" style="left: 10%"> <div> <label style="font-weight: bold;margin-right: 10px;">文 件:</label> <el-input v-model="fileName" size="mini" style="width:52%; margin-left: 18px"></el-input> <el-upload class="upload-demo" ref="upload" action="/pdf/upload" :show-file-list="false" :before-upload="beforeUpload"> <el-button slot="trigger" size="mini" type="danger">选取文件</el-button> </el-upload> <el-form ref="pdfForm" :model="pdfForm" > <el-form-item label="文件类别" style="margin-top: 10px"> <el-select class="formItem" size="mini" placeholder="请选择文件类别" v-model="pdfForm.announcementType"> <el-option v-for="item in announcementTypeOptions" :key="item.value" :label="item.key" :value="item.value"></el-option> </el-select> </el-form-item> </el-form> <div style="margin-top: 10px">备注：仅限上传一个PDF文件</div> </div> <div slot="footer" style="text-align: center;"> <!-- <el-button size="mini" @click="viewfile">预览</el-button> --> <el-button size="mini" type="primary" @click="upLoadpdf()">上传</el-button> <el-button size="mini" @click="showDataImportDialog = false">取 消</el-button> </div> </el-dialog> </div>
data:
data() { return { pdfForm:{ announcementType:"" }, announcementTypeOptions:[
{
value: ‘1‘,
key: ‘已发布‘
}, {
value: ‘0‘,
key: ‘未发布‘
}
], showDataImportDialog:false, fileName:"", } },
methods:
uploadShow(){ //点击上传显示 this.showDataImportDialog=true }, //上传PDF文件之前 beforeUpload(file){ console.log("文件", file); this.file = file; this.fileName = file.name; // this.fileSize = file.size; const extension = file.name.split(‘.‘).slice(-1) == ‘pdf‘ if (!extension) { this.$message.warning(‘上传模板只能是pdf格式!‘) this.fileName = ‘‘ return } let reader = new FileReader(); reader.readAsDataURL(file); let that = this; reader.onload = function() { that.fileData = reader.result; }; return false; // 返回false不会自动上传 }, //预览文件 viewfile(){ console.log("viewFile"); var win = window.open(); win.document.write( ‘<body style="margin:0px;"><object data="‘ + this.fileData + ‘" type="application/pdf" width="100%" height="100%"><iframe src="‘ + this.fileData + ‘" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>‘ ); }, //上传文件按钮 upLoadpdf(){ if(this.fileName === ‘‘){ this.$message.warning(‘请选择要上传的文件！‘); return false } if(this.pdfForm.announcementType === ‘‘){ this.$message.warning(‘请选择文件类别‘); return false } let fileFormData = new FormData(); fileFormData.append("file", this.file); fileFormData.append(‘announcementType‘,this.pdfForm.announcementType) fileFormData.append(‘fileLevel‘,this.pdfForm.fileLevel) uploadFile(fileFormData,{headers:{ "Content-Type": "multipart/form-data" }}).then(res=>{ console.log(res)this.showDataImportDialog=false; this.$message({message: res.data.msg,type: ‘success‘}); }).catch(err => { failure(‘出现未知问题，刷新页面，或者联系程序员‘) console.log(err); }); },