基于 vue+element ui 文件上传
首先，由于毕设中需要上传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; } }); }
现在就来测试一下，发现可以上传成功：
希望可帮助到你！文章写的比较粗略，后期有时间会完善完善！
