使用el upload标签上传文件的几种常见使用场景（前台+后台）

前言：本篇博客主要介绍ElementUI中el upload上传控件的使用，包含前后台代码。

文章目录

一。总体代码
二。使用场景
- 1.添加
- 2.修改
- 3.单独上传到服务器

一。总体代码

1.前端控件主要代码：

增加：

<!-- 写信 -->
<div class="tabCon"><div class="tabcon" v-show="nowIndex==0"><el-form :model="formData" ref="formData" :rules="formRule" style="margin-top: 3%;"><el-form-item label="主题" prop="theme" label-width="20%"><el-input v-model="formData.theme"></el-input>    </el-form-item><!-- 添加附件 --><el-form-item label-width="20%"><div class="upload-box"><el-uploadref="upload"action="/":http-request="upload"accept="image/png, image/jpg, image/jpeg, image/gif, .txt, .doc, .docx, .xls, .xlsx, .pdf, .zip, .rar":limit=limitNum:on-remove="handleRemove":before-remove="beforeRemove":auto-upload="true":before-upload="beforeUploadFile":on-change="fileChange":on-exceed="exceedFile":on-success="handleSuccess":on-error="handleError":on-progress="uploadFileProcess":file-list="fileList"><el-button size="small" type="text" icon="iconfont icon-lianjie">&nbsp; 添加附件</el-button><div slot="tip" class="el-upload__tip">只能上传jpg, jpeg, png, gif, txt, doc, docx, xls, xlsx, pdf, zip, rar文件，且不超过100MB!</div></el-upload><el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress></div></el-form-item><el-form-item label="正文" label-width="20%"><div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"><wang-editor v-model="formData.content" :isClear="isClear"></wang-editor></div>   </el-form-item><el-form-item class="btn-select"><el-button @click="personalForward">个人发送</el-button><el-button @click="groupForward">群组发送</el-button><el-button type="info" plain @click="saveDraft">存草稿</el-button></el-form-item></el-form>              </div>

修改：

<!-- 修改草稿箱 --><div class="tabCon"><div class="tabcon"><el-form :model="formData" ref="formData" :rules="formRule" style="margin: 3% 6%;"><el-form-item label="主题" prop="theme" label-width="20%"><el-input v-model="formData.theme"></el-input>    </el-form-item><!-- 修改附件 --><el-form-item label-width="20%"><div class="upload-box"><el-upload:headers="headers"ref="upload"action="":http-request="upload"accept="image/png, image/jpg, image/jpeg, image/gif, .txt, .doc, .docx, .xls, .xlsx, .pdf, .zip, .rar":on-remove="handleRemove":before-remove="beforeRemove":limit="limitNum":auto-upload="true":before-upload="beforeUploadFile":on-change="fileChange":on-exceed="exceedFile":on-success="handleSuccess":on-error="handleError":on-preview="handlePreview":file-list="fileList"><el-button size="small" type="text" icon="iconfont icon-lianjie">&nbsp; 修改附件</el-button><div slot="tip" class="el-upload__tip">只能上传jpg, jpeg, png, gif, txt, doc, docx, xls, xlsx, pdf, zip, rar文件，且不超过100MB!</div></el-upload></div></el-form-item><el-form-item label="正文" label-width="20%"><div class="md-layout-item md-medium-size-100 md-xsmall-size-100 md-size-100"><wang-editor :content="formData.content" :isClear="isClear"></wang-editor></div>   </el-form-item><el-form-item class="btn-select" style="margin-top: 3%;"><!-- <el-button @click="personalForward">个人发送</el-button><el-button @click="groupForward">群组发送</el-button> --><el-button type="info" plain @click="updateDraft">修改草稿</el-button></el-form-item></el-form>              </div></div>

2.前端主要方法代码：

增加：

    //进度条显示uploadFileProcess(event, file, fileList) {this.progressFlag = true; // 显示进度条this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度if (this.loadProgress >= 100) {this.loadProgress = 100setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条}},//移除附件前的操作beforeRemove(file, fileList) {return this.$confirm(`确定移除 ${ file.name }？`);},//移除附件执行的操作handleRemove(file, fileList) {console.log(file, fileList);this.formData.file=null;},// 文件超出个数限制时的钩子exceedFile(files, fileList) {this.$notify.warning({title: '警告',message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`});},// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传beforeUploadFile(file) {console.log('before upload')console.log(file)let extension = file.name.substring(file.name.lastIndexOf('.')+1)console.log(extension)let size = file.size / 1024 / 1024console.log(size)//文件格式类型限定const isPNG = extension === 'png'const isJPG = extension === 'jpg'const isJPEG = extension === 'jpeg'const isGIF = extension === 'gif'const isTXT = extension === 'txt'const isDOC = extension === 'doc'const isDOCX = extension === 'docx'const isXLS = extension === 'xls'const isXLSX = extension === 'xlsx'const isPDF = extension === 'pdf'const isZIP = extension === 'zip'const isRAR = extension === 'rar'//文件格式类型过滤if(!isPNG && !isJPEG && !isJPG && !isGIF && !isTXT && !isDOC && !isDOCX && !isXLS &&!isXLSX && !isPDF && !isZIP && !isRAR) {this.$notify.warning({title: '警告',message: '只能上传后缀是jpg, jpeg, png, gif, txt, doc, docx, xls, xlsx, pdf, zip, rar的文件'});}if(size > 100) {this.$notify.warning({title: '警告',message: `文件大小不得超过100M`});}},// 文件状态改变时的钩子fileChange(file, fileList) {console.log('change')console.log("file"+file)this.formData.file = file.rawconsole.log("this.formData.file.length:"+this.formData.file.size)this.fileList=fileListconsole.log("this.fileList.length:"+fileList.length)},// 文件上传成功时的钩子handleSuccess(res, file, fileList) {this.$notify.success({title: '成功',message: `文件上传成功`});},// 文件上传失败时的钩子handleError(err, file, fileList) {this.$notify.error({title: '错误',message: `文件上传失败`});},//模拟文件上传成功方法upload(){},//保存到草稿saveDraft(){if(this.formData.theme==''){this.$message.warning('邮件标题不能为空，请重新输入!');return;} if(this.formData.content==''){this.$message.warning('邮件内容不能为空，请重新输入!');return;}let params = new FormData();params.append('title',this.formData.theme);params.append('content',this.formData.content);params.append('multipartFile',this.formData.file);this.setPageLoading();api.saveDraft(params).then(respond => {if (respond.status === 200) {let respondData = respond.data;if (respondData.status === 200) {this.groupForwardingDialog = false;this.$message({type: 'success',message: '保存草稿成功!'});//跳转到草稿箱页面this.nowIndex=3;this.getDraftList();} else {this.$message.error(respond.data.message);}pageLoading.close();} else {this.$message.error('服务器连接异常,请刷新后重新操作!');}});},

修改：

//得到草稿邮件详细信息
getOneDraft(){let params = {id:this.draftId}// console.log('ddsdsfs>>>',params);api.getOneDraft(params).then(respond => {   if (respond.status === 200) {let respondData = respond.data;this.formData.theme = respondData.data.messageDraft.title;this.formData.content = respondData.data.messageDraft.content;this.draftInfo.addTime = respondData.data.messageDraft.addTime;if(respondData.data.attachment != null){this.draftInfo.fileName = respondData.data.attachment.originalName;this.draftInfo.fileUrl = respondData.data.attachment.fileUrl;this.draftInfo.fileSize = respondData.data.attachment.fileSize;// this.fileList[0].name=respondData.data.attachment.originalName;// this.fileList[0].url=respondData.data.attachment.fileUrl;this.fileList.push({ name: respondData.data.attachment.originalName, url: respondData.data.attachment.fileUrl });}console.log(this.draftInfo);console.log(this.formData);} else {this.$message.error('服务器连接异常,请刷新后重新操作!');}});
},//修改草稿箱信息
updateDraft(param){console.log("this.filelist",this.fileList);if(this.formData.theme==''){this.$message.warning('邮件标题不能为空，请重新输入!');return;} if(this.formData.content==''){this.$message.warning('邮件内容不能为空，请重新输入!');return;}let params = new FormData();params.append('id',this.draftId);params.append('title',this.formData.theme);params.append('content',this.formData.content);params.append('multipartFile',this.formData.file);params.append('isChanged',this.formData.isChanged);console.log('ddsdsfs>>>',params);api.updateDraft(params).then(respond => {if (respond.status === 200) {let respondData = respond.data;if (respondData.status === 200) {this.groupForwardingDialog = false;this.$message({type: 'success',message: '修改草稿成功!'});// 跳转到邮箱页面this.$router.push({name: "InsideLetter"});} else {this.$message.error(respond.data.message);}} else {this.$message.error('服务器连接异常,请刷新后重新操作!');}});
},

3.后台控制器主要代码：

 /*** 保存个人邮件到草稿箱** @param jwt* @param title* @param content* @param multipartFile* @return*/@ApiOperation(value = "保存个人邮件到草稿箱")@PostMapping("/saveDraft")@PreAuthorize("hasAnyAuthority('teacher_base','admin_base','student_base')")public HttpRespond saveDraft(@RequestHeader("Authorization") String jwt,@RequestParam(value = "title") String title,@RequestParam(value = "content") String content,@RequestParam(value = "multipartFile",required=false) MultipartFile multipartFile) {// 获取当前登录的用户信息: userId,HashMap<String, String> userInfo = JsonInfoUtils.getUserInfo(jwt);if (userInfo == null) {return HttpRespond.unauthorized();}Integer userId = Integer.valueOf(userInfo.get("userId"));// 开启事务管理DefaultTransactionDefinition def = new DefaultTransactionDefinition();def.setPropagationBehavior(TransactionDefinition.PROPAGATION_REQUIRED);TransactionStatus status = txManager.getTransaction(def);String tip = "";try {MessageDraft messageDraft = new MessageDraft();//封装数据messageDraft.setUserId(userId);messageDraft.setTitle(title);messageDraft.setType(0);//保存个人草稿draftService.save(messageDraft);//将邮件草稿箱内容存入mongodb中MessageDraftContent messageDraftContent=new MessageDraftContent();messageDraftContent.setMessagedraft_id(messageDraft.getId());messageDraftContent.setMessagedraft_content(content);draftService.addMessageDraftContent(messageDraftContent);//如果上传邮件附件非空if(multipartFile!=null){tip = saveAttachment(multipartFile, messageDraft.getId(), MessageAttachmentTargetTypeEnum.DAFT.getCode());}} catch (Exception e) {txManager.rollback(status);//事务回滚log.error("系统内部错误", e);return HttpRespond.unknownException();}//如果上传附件类型有误if (tip.equals("wrongFileType")) {txManager.rollback(status);//事务回滚return HttpRespond.wrongFileType();}//如果上传文件大小超过100Mif (tip.equals("wrongFileSize")) {txManager.rollback(status);//事务回滚return HttpRespond.wrongFileSize();}txManager.commit(status);//事务提交return HttpRespond.success();}/*** 修改草稿箱个人邮件* @param jwt* @param id* @param title* @param content* @param multipartFile* @param isChanged 是否发生修改标记* @return*/@ApiOperation(value = "修改草稿箱个人邮件")@PostMapping("/updateDraft")@PreAuthorize("hasAnyAuthority('teacher_base','admin_base','student_base')")public HttpRespond updateDraft(@RequestHeader("Authorization") String jwt,@RequestParam(value = "id") Integer id,@RequestParam(value = "title") String title,@RequestParam(value = "content") String content,@RequestParam(value = "multipartFile",required = false) MultipartFile multipartFile,@RequestParam(value = "isChanged") Boolean isChanged) {// 获取当前登录的用户信息: userId,HashMap<String, String> userInfo = JsonInfoUtils.getUserInfo(jwt);if (userInfo == null) {return HttpRespond.unauthorized();}Integer userId = Integer.valueOf(userInfo.get("userId"));// 开启事务管理DefaultTransactionDefinition def = new DefaultTransactionDefinition();def.setPropagationBehavior(TransactionDefinition.PROPAGATION_REQUIRED);TransactionStatus status = txManager.getTransaction(def);String tip = "";try {//根据草稿id查询草稿箱信息MessageDraft messageDraft = draftService.getById(id);//封装数据messageDraft.setUserId(userId);messageDraft.setTitle(title);//保存个人草稿draftService.updateByIdAndUid(messageDraft);//修改mongodb中的邮件草稿箱内容draftService.updateMessageDraftContent(id,content);//如果isChanged为false，附件不发生修改操作//如果isChanged为true，附件发生修改操作if(isChanged==true){// 3，附件上传并插入 "附件" 数据if(multipartFile!=null){tip = updateAttachment(multipartFile, id);}else{//不存在上传附件，删除草稿箱邮件附件信息attachmentService.deleteByTargetIdAndTargetType(id,MessageAttachmentTargetTypeEnum.DAFT.getCode());}}} catch (Exception e) {txManager.rollback(status);log.error("系统内部错误", e);return HttpRespond.unknownException();}txManager.commit(status);//如果上传附件类型有误if (tip.equals("wrongFileType")) {return HttpRespond.wrongFileType();}//如果上传文件大小超过100Mif (tip.equals("wrongFileSize")) {return HttpRespond.wrongFileSize();}return HttpRespond.success();}/*** 查看某一邮件草稿具体信息* @param jwt* @param id* @return*/@ApiOperation(value = "查看某一邮件草稿具体信息")@GetMapping("/getOneDraft")@PreAuthorize("hasAnyAuthority('teacher_base','admin_base','student_base')")public HttpRespond getOneDraft(@RequestHeader("Authorization") String jwt,@RequestParam(value = "id") Integer id){// 获取当前登录的用户信息: userId,HashMap<String, String> userInfo = JsonInfoUtils.getUserInfo(jwt);if (userInfo == null) {return HttpRespond.unauthorized();}Integer userId = Integer.valueOf(userInfo.get("userId"));Map<String, Object> data = new HashMap<>();//1。查询草稿箱邮件信息MessageDraft messageDraft=draftService.getById(id);//2.从mongodb查询邮件草稿内容MessageDraftContent messageDraftContent=draftService.getMessageDraftContent(id);messageDraft.setContent(messageDraftContent.getMessagedraft_content());data.put("messageDraft",messageDraft);// 3. 根据关联邮件id查询附件MessageAttachment attachment = attachmentService.getByTargetIdAndTargetType(messageDraft.getId(), MessageAttachmentTargetTypeEnum.DAFT.getCode());data.put("attachment", attachment);return HttpRespond.success(data);}/*** 上传保存邮件附件* 默认支持附件上传类型（jpg,png,jpeg,gif,txt,doc,docx,xls,xlsx,pdf,zip,rar）* 默认上传文件大小（100m）*/
//    throws Exceptionprivate String saveAttachment(MultipartFile multipartFile, int targetId, int targetType)  {// 附件上传并插入 "附件" 数据//获取上传的原始文件全称String fileOriName = multipartFile.getOriginalFilename();//获取上传的文件名称String fileName = fileOriName.substring(0, fileOriName.lastIndexOf("."));String type = "jpg,png,jpeg,gif,txt,doc,docx,xls,xlsx,pdf,zip,rar";//获取上传文件的后缀名（文件类型）String fileExt = fileOriName.substring(fileOriName.lastIndexOf(".") + 1);//上传文件格式不符合if (!type.contains(fileExt)) {return "wrongFileType";}long length = multipartFile.getSize();//获取上传文件大小double fileSize = FileSizeUtil.getFileSize(length, "B");//如果上传文件大小大于100mif (fileSize / 1048576 > 100) {return "wrongFileSize";}//        String size = fileSize + "B";String size = String.valueOf(fileSize);String[] uploadResults = null;byte[] fileBuff = null;InputStream inputStream = null;try {//接受字符文件输入流inputStream = multipartFile.getInputStream();if (inputStream != null) {//获取数据流中含有字节数int len1 = inputStream.available();fileBuff = new byte[len1];//从(来源)输入流中(读取内容)读取的一定数量字节数,并将它们存储到(去处)缓冲区数组fileBuff中inputStream.read(fileBuff);}} catch (IOException e) {log.error("IO Exception : add file exception!", e);} finally {try {inputStream.close();} catch (IOException e) {log.error("IO Exception : close Input Stream error!", e);}}//上传文件，返回所属组别以及远程文件名称uploadResults = FastDFSClient.upload(fileName, fileExt, fileBuff);String groupName = uploadResults[0];String remoteName = uploadResults[1];String url = null;try {//得到上传后远程文件的访问路径url = FastDFSClient.getFilePath(groupName, remoteName);} catch (IOException e) {log.error("IO Exception : close Input Stream error!", e);}//封装数据MessageAttachment attachment = new MessageAttachment();attachment.setTargetId(targetId);attachment.setTargetType(targetType);attachment.setOriginalName(fileOriName);attachment.setActualName(fileName);attachment.setFileSize(size);attachment.setFileUrl(url);attachment.setFileType(fileExt);attachmentService.save(attachment);return "success";}/*** 上传修改邮件附件* 默认支持附件上传类型（jpg,png,jpeg,gif,txt,doc,docx,xls,xlsx,pdf,zip,rar）* 默认上传文件大小（100m）*/private String updateAttachment(MultipartFile multipartFile, int targetId) {// 3，附件上传并插入 "附件" 数据//获取上传的原始文件全称String fileOriName = multipartFile.getOriginalFilename();//获取上传的文件名称String fileName = fileOriName.substring(0, fileOriName.lastIndexOf("."));String type = "jpg,png,jpeg,gif,txt,doc,docx,xls,xlsx,pdf,zip,rar";//获取上传文件的后缀名（文件类型）String fileExt = fileOriName.substring(fileOriName.lastIndexOf(".") + 1);//上传文件格式不符合if (!type.contains(fileExt)) {return "wrongFileType";}long length = multipartFile.getSize();//获取上传文件大小double fileSize = FileSizeUtil.getFileSize(length, "B");//如果上传文件大小大于100mif (fileSize / 1048576 > 100) {return "wrongFileSize";}//        String size = fileSize + "B";String size = String.valueOf(fileSize);String[] uploadResults = null;byte[] fileBuff = null;InputStream inputStream = null;try {//接受字符文件输入流inputStream = multipartFile.getInputStream();if (inputStream != null) {//获取数据流中含有字节数int len1 = inputStream.available();fileBuff = new byte[len1];//从(来源)输入流中(读取内容)读取的一定数量字节数,并将它们存储到(去处)缓冲区数组fileBuff中inputStream.read(fileBuff);}} catch (IOException e) {log.error("IO Exception : add file exception!", e);} finally {try {inputStream.close();} catch (IOException e) {log.error("IO Exception : close Input Stream error!", e);}}//上传文件，返回所属组别以及远程文件名称uploadResults = FastDFSClient.upload(fileName, fileExt, fileBuff);String groupName = uploadResults[0];String remoteName = uploadResults[1];String url = null;try {//得到上传后远程文件的访问路径url = FastDFSClient.getFilePath(groupName, remoteName);} catch (IOException e) {log.error("IO Exception : close Input Stream error!", e);}//根据草稿箱id查找附件信息MessageAttachment attachment = attachmentService.getByTargetId(targetId,MessageAttachmentTargetTypeEnum.DAFT.getCode());//若查找邮件信息不为空，则进行修改操作if(attachment!=null){//封装数据attachment.setOriginalName(fileOriName);attachment.setActualName(fileName);attachment.setFileSize(size);attachment.setFileUrl(url);attachment.setFileType(fileExt);attachment.setDeleted(false);attachmentService.update(attachment);}else{//若没有则进行新增操作//新增实体类封装MessageAttachment attachmentInfo=new MessageAttachment();attachmentInfo.setTargetType(MessageAttachmentTargetTypeEnum.DAFT.getCode());attachmentInfo.setTargetId(targetId);attachmentInfo.setOriginalName(fileOriName);attachmentInfo.setActualName(fileName);attachmentInfo.setFileSize(size);attachmentInfo.setFileUrl(url);attachmentInfo.setFileType(fileExt);attachmentInfo.setDeleted(false);attachmentService.save(attachmentInfo);}return "success";}

二。使用场景

1.添加

这里常见的是上传一些图片以及文件，以提交表单方式传递文件流到后台，后台处理后上传到图片服务器，比如fastDFS文件服务器，将该文件的信息再存储到数据库中，再进行多张表数据的绑定。

主要用到的方法有：

1.上传文件时做个数限制的方法：

2.上传文件时做类型控制的方法：

3.文件状态发生改变，拿到前端文件流数据：

2.修改

这里主要是通过upload控件进行一个回显，然后可以修改上传的附件。

主要用到的方法有：

1.附件回显，使用它的file-list属性，接收name和url即可：

2.附件修改，先移除再上传：

之后在进行上传操作即可。

3.单独上传到服务器

标签默认是以action属性单独提交文件到服务器中，如果需要以提交表单的方式来提交文件流数据，就要用http-request属性去自定义上传文件的方法，这样就会调用http-request声明的方法，而不会走action声明的方法。这里我是以提交表单的方式来提交文件流数据，所以就自定义了一个方法upload来进行模拟上传，里面没有写什么具体的实现，因为我是最后提交表单时才将该文件流数据上传到服务器。

主要用到的方法有：