最近沒事剛好練習下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 = falsethis.$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("\\", "/");}

精彩源碼推薦：

?大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取聯系方式👇🏻👇🏻👇🏻

打卡 文章 更新?108/? 365天

?精彩專欄推薦：在下方專欄👇🏻👇🏻👇🏻👇🏻

java項目精品實戰案例《100套》https://blog.csdn.net/weixin_39709134/category_11128297.htmlhttps://blog.csdn.net/weixin_39709134/category_11128297.htmlweb前端期末大作業網頁實戰《100套》https://blog.csdn.net/weixin_39709134/category_11374891.htmlhttps://blog.csdn.net/weixin_39709134/category_11374891.html?

總結

以上是生活随笔為你收集整理的Vue+Element+Springboot实现图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。