首先，由於畢設中需要上傳pdf和圖片文件，所以做完了，來給大家分享一下，
本項目是基於Vue + Element UI 完成的文件上傳
PDF文件上傳 和 圖片文件
<el-form-item label="上傳書籍文件" prop="fileName" required> <el-input v-model="ruleForm.fileName" placeholder="請上傳文件" style="width: 150px" :disabled="true"> </el-input> <el-upload style="width: 200px; display: inline; margin-left: 25px" name="bookFile" class="upload-demo" ref="upload" action="/api/bsBook/upload" :show-file-list="true" :before-upload="beforeUploadPDF"> <el-button class="selectfile" slot="trigger" type="danger" icon="el-icon-upload2">選取文件</el-button> <el-button type="danger" @click="viewFile" icon="el-icon-view">預覽</el-button> </el-upload> </el-form-item> <el-form-item label="選擇書籍封面" prop="coverUrl" required> <el-upload class="switch-block" name="coverFile" action="/api/bsBook/upload" list-type="picture-card" accept="image/png, image/gif, image/jpg, image/jpeg" :limit="1" :auto-upload="false" :file-list="coverFileList" :on-change="uploadCoverChange" :on-preview="handlePicture" :on-remove="handleRemove" :on-exceed="overFile"> <el-button slot="trigger" size="mini" type="danger">點擊上傳</el-button> <div slot="tip" class="el-upload__tip"> 只能上傳jpg/png文件，且不超過10MB </div> </el-upload> </el-form-item>
效果圖：
js部分：
data(){ return { ruleForm: { name: '', // 書籍名稱 author: '', // 作者 bookCategoryId: '', // 書籍分類 字段 publicationDate: '', // 出版日期 coverUrl: '', // 書籍封面圖 copyrightUrl: '', // 版權圖片 // pdf 文件上傳 file: null, // fileName: '', // 書籍文件名稱 lookImageUrl: '' // 查看大圖片路徑 }, fileData: null, // 書籍文件預覽 bookFileData: null, // 書籍上傳文件 bsFileCover: {}, // 書籍封面文件 bsFileCopy: {}, // 書籍版權文件 } }
// PDF 上傳之前鈎子調用 beforeUploadPDF(file) { const extension = file.name.split('.').slice(-1) == 'pdf'; if (!extension) { this.$message.warning('上傳模板只能是pdf格式!'); return; } let reader = new FileReader(); reader.readAsDataURL(file); let that = this; reader.onload = function() { that.fileData = reader.result; }; this.ruleForm.file = file; this.ruleForm.fileName = file.name; this.bookFileData = file; return false; // 返回false不會自動上傳 }, //預覽 PDF 文件，這里用的是打開新窗口用瀏覽器查看 PDF viewFile() { if (this.fileData == null) { this.$message.warning('請先上傳PDF文件'); return false; } 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>'); }, /** * 文件狀態改變時的鈎子，添加文件、上傳成功和上傳失敗時都會被調用 * 獲取書籍封面圖片文件 * @file * @fileList */ uploadCoverChange(file, fileList) { console.log(file, '====', fileList); const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/jpg' || file.raw.type === 'image/gif'; const isLt5M = file.size / 1024 / 1024 < 10; if (!isIMAGE) { this.$message.error('上傳文件只能是圖片格式!'); return false; } if (!isLt5M) { this.$message.error('上傳圖片大小不能超過 10MB!'); return false; } this.ruleForm.coverUrl = file.url; this.bsFileCover['coverFile'] = fileList; }, // 表單提交 submitForm(formName) { let submitFormData = new FormData(); submitFormData.append('bookFile', this.bookFileData); // 書籍文件 let tempBookBaseInfo = { content: '書籍內容' }; // 書籍封面文件 Object.entries(this.bsFileCover).forEach((file) => { console.log(file, '123'); file[1].forEach((item) => { // 下面的 "coverFile"，對應后端需要接收的name，這樣對圖片和文件做一個區分，name為images為圖片 submitFormData.append('coverFile', item.raw); }); }); // 版權文件 Object.entries(this.bsFileCopy).forEach((file) => { file[1].forEach((item) => { submitFormData.append('copyrightFile', item.raw); }); }); submitFormData.append('name', this.ruleForm.name); // 書籍名稱 submitFormData.append('author', this.ruleForm.author); // 書籍作者 submitFormData.append('content', tempBookBaseInfo.content); submitFormData.append('bookCategoryId', this.ruleForm.bookCategoryId); // 書籍分類Id submitFormData.append('publicationDate', this.getYMD(this.ruleForm.publicationDate)); // 出版日期 submitFormData.forEach((element) => { console.log(element, '上傳參數'); }); // 下一步提交數據，上傳書籍 this.$refs[formName].validate((valid) => { if (valid) { // 書籍基礎信息 uploadBookBaseInfo(submitFormData).then((res) => { console.log(res, '提交返回結果'); if (res.data.code === 0) { this.$message({ showClose: true, message: '上傳成功！請等待管理員審核！', type: 'success', duration: 4000 }); } else { this.$message({ showClose: true, message: '上傳失敗，請聯系管理員！', type: 'error', duration: 4000 }); } }); } else { this.$message({ showClose: true, message: '請重新檢查數據填寫是否有遺漏！', type: 'error', duration: 4000 }); return false; } }); }
現在就來測試一下，發現可以上傳成功：
希望可幫助到你！文章寫的比較粗略，后期有時間會完善完善！