Vue+Element+Springboot圖片上傳的實現示例
最近沒事剛好聯系下vue+springboot前段後分離的項目、用上瞭圖片上傳功能、記錄一下。
前端待提交的表單部分代碼
<el-form-item label="封面圖片"> <el-upload v-model="dataForm.title" class="avatar-uploader" :limit="1" list-type="picture-card" :on-preview="handlePictureCardPreview" multiple :http-request="uploadFile" :on-remove="handleRemove" :on-change='changeUpload' :file-list="images"> <i class="el-icon-plus"></i> </el-upload> </el-form-item>
el-upload裡面的元素解釋:
- on-preview:點擊文件列表中已上傳的文件時的事件
- on-remove:刪除文件時候調用的方法
- on-change:文件狀態改變時的事件,添加文件、上傳成功和上傳失敗時都會被調用
- file-list:上傳的文件列表或者默認回顯的數據展示渲染
retrun和data
return { images: [{name: 'food.jpg', url: 'https://img-blog.csdnimg.cn/20210329194832973.png'}], imageUrl: '', fileList: [], // 文件上傳數據(多文件合一) dialogImageUrl: '', dialogVisible: false, options: [], content: '', editorOption: {}, visible: false, dataForm: { id: 0, title: '', content: '', bz: '' }, tempKey: -666666 // 臨時key, 用於解決tree半選中狀態項不能傳給後臺接口問題. # 待優化 }
預覽圖片和上傳圖片以及刪除圖片
changeUpload: function(file, fileList) {//預覽圖片 this.fileList = fileList; }, uploadFile(file){ }, handleRemove(file, fileList) { }, handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; },
這裡我是用fomrData對象進行提交的、因為隻需要上傳一張單張封面圖片、還有添加其他的一些表單內容進去
// 表單提交 dataFormSubmit () { const form = new FormData()// FormData 對象 form.append('file', this.fileList); form.append('title', this.dataForm.title); form.append('content', this.$refs.text.value); this.$refs['dataForm'].validate((valid) => { if (valid) { this.$http({ url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`), method: 'post', data: form }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.visible = false this.$emit('refreshDataList') } }) } else { this.$message.error(data.msg) } }) } }) }
後臺的話通過HttpServletRequest request–WebUtils
.getNativeRequest(request, MultipartHttpServletRequest.class)來獲取文件請求並解析文件到服務器或本地
/** * @author lyy * 保存 PC-後臺上傳文件 */ @RequestMapping(value = "sys/file/save", method = {RequestMethod.POST, RequestMethod.GET}) @Transactional public R save(HttpServletRequest request) { String classify = request.getParameter("classify"); MultipartHttpServletRequest multipartRequest = WebUtils .getNativeRequest(request, MultipartHttpServletRequest.class); String fileName = ""; if (multipartRequest != null) { Iterator<String> names = multipartRequest.getFileNames(); while (names.hasNext()) { List<MultipartFile> files = multipartRequest.getFiles(names.next()); if (files != null && files.size() > 0) { for (MultipartFile file : files) { fileName = file.getOriginalFilename(); String SUFFIX = FileUtil.getFileExt(fileName); File uFile = new File(); uFile.setFileName(fileName); uFile.setClassify(classify); uFile.setCreateTime(new Date()); uFile.setFileType(SUFFIX); String uuid = FileUtil.uuid(); try { uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX); } catch (IOException e) { e.printStackTrace(); } fileService.save(uFile); } } } } return R.ok(); }
上傳文件到本地的靜態方法
/** * 上傳文件 *@author lyy * @param file * @return * @throws IOException * @throws IllegalStateException */ public static String uploadFile(String uuid, MultipartFile file) throws IllegalStateException, IOException { String defaultUrl = MyFileConfig.getFilePath(); String Directory = java.io.File.separator ; String realUrl = defaultUrl + Directory; java.io.File realFile = new java.io.File(realUrl); if (!realFile.exists() && !realFile.isDirectory()) { realFile.mkdirs(); } String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename()); file.transferTo(new java.io. File(fullFile)); String relativePlanUrl = Directory; return relativePlanUrl.replaceAll("\\", "/"); }
到此這篇關於Vue+Element+Springboot圖片上傳的實現示例的文章就介紹到這瞭,更多相關Vue+Element+Springboot圖片上傳內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue上傳文件formData上傳的解決全流程
- Java實現文件上傳保存
- vue+vant 上傳圖片需要註意的地方
- elementUI自定義上傳文件功能實現(前端後端超詳細過程)
- vue項目中form data形式傳參方式