Vue+Element+Springboot图片上传的实现示例

近来出事恰好联络下vue+springboot前段后别离的项目、用上了图片上传功用、记载一下。
前端待提交的表单部门代码

1. <el-form-item label="启里图片">
   
2.                 <el-upload v-model="dataForm.title"
   
3.                         class="avatar-uploader"
   
4.                         :limit="1"
   
5.                         list-type="picture-card"
   
6.                         :on-preview="handlePictureCardPreview"
   
7.                         multiple
   
8.                         :http-request="uploadFile"
   
9.                         :on-remove="handleRemove"
   
10.                         :on-change='changeUpload'
    
11.                         :file-list="images">
    
12.                     <i class="el-icon-plus"></i>
    
13.                 </el-upload>
    
14.             </el-form-item>

复造代码

el-upload内里的元素注释：

     

• on-preview:面击文件列表中已上传的文件时的变乱     
  
• on-remove:删除文件时分挪用的办法     
  
• on-change:文件形态改动时的变乱，增加文件、上传胜利战上传失利时城市被挪用     
  
• file-list:上传的文件列表大要默许回隐的数据展现衬着
  

retrun战data

1. return {
   
2.                 images: [{name: 'food.jpg', url: 'https://img-blog.csdnimg.cn/20210329194832973.png'}],
   
3.                 imageUrl: '',
   
4.                 fileList: [],  // 文件上传数据（多文件开一）
   
5.                 dialogImageUrl: '',
   
6.                 dialogVisible: false,
   
7.                 options: [],
   
8.                 content: '',
   
9.                 editorOption: {},
   
10.                 visible: false,
    
11.                 dataForm: {
    
12.                     id: 0,
    
13.                     title: '',
    
14.                     content: '',
    
15.                     bz: ''
    
16.                 },
    
17.                 tempKey: -666666 // 暂时key, 用于处理tree半选中形态项不克不及传给背景接心成绩. # 待劣化
    
18.             }

复造代码

预览图片战上传图片和删除图片

1. changeUpload: function(file, fileList) {//预览图片
   
2.                 this.fileList = fileList;
   
3.             },
   
4.             uploadFile(file){
   
5. 
   
6.             },
   
7.             handleRemove(file, fileList) {
   
8.             },
   
9.             handlePictureCardPreview(file) {
   
10.                 this.dialogImageUrl = file.url;
    
11.                 this.dialogVisible = true;
    
12.             },   

复造代码

那里我是用fomrData工具举办提交的、因为只需求上传一张单张启里图片、另有增加其他的一些表单内乱容出来

1. // 表单提交
   
2.             dataFormSubmit () {
   
3.                 const form = new FormData()// FormData 工具
   
4.                 form.append('file', this.fileList);
   
5.                 form.append('title', this.dataForm.title);
   
6.                 form.append('content', this.$refs.text.value);
   
7.                 this.$refs['dataForm'].validate((valid) => {
   
8.                     if (valid) {
   
9.                         this.$http({
   
10.                             url: this.$http.adornUrl(`/sys/inform/${!this.dataForm.id ? 'save' : 'update'}`),
    
11.                             method: 'post',
    
12.                             data: form
    
13.                         }).then(({data}) => {
    
14.                             if (data && data.code === 0) {
    
15.                                 this.$message({
    
16.                                     message: '操纵胜利',
    
17.                                     type: 'success',
    
18.                                     duration: 1500,
    
19.                                     onClose: () => {
    
20.                                         this.visible = false
    
21.                                         this.$emit('refreshDataList')
    
22.                                     }
    
23.                                 })
    
24.                             } else {
    
25.                                 this.$message.error(data.msg)
    
26.                             }
    
27.                         })
    
28.                     }
    
29.                 })
    
30.             }

复造代码

布景的话经由过程HttpServletRequest request--WebUtils
.getNativeRequest(request, MultipartHttpServletRequest.class)去获得文件恳求并剖析文件到效劳器或当地

1. /**
   
2. * @author lyy
   
3. * 保留  PC-背景上传文件
   
4. */
   
5. @RequestMapping(value = "sys/file/save", method = {RequestMethod.POST, RequestMethod.GET})
   
6. @Transactional
   
7. public R save(HttpServletRequest request) {
   
8.     String classify = request.getParameter("classify");
   
9.     MultipartHttpServletRequest multipartRequest = WebUtils
   
10.             .getNativeRequest(request, MultipartHttpServletRequest.class);
    
11.     String fileName = "";
    
12.     if (multipartRequest != null) {
    
13.         Iterator<String> names = multipartRequest.getFileNames();
    
14.         while (names.hasNext()) {
    
15.             List<MultipartFile> files = multipartRequest.getFiles(names.next());
    
16.             if (files != null && files.size() > 0) {
    
17.                 for (MultipartFile file : files) {
    
18.                     fileName = file.getOriginalFilename();
    
19.                     String SUFFIX = FileUtil.getFileExt(fileName);
    
20.                     File uFile = new File();
    
21.                     uFile.setFileName(fileName);
    
22.                     uFile.setClassify(classify);
    
23.                     uFile.setCreateTime(new Date());
    
24.                     uFile.setFileType(SUFFIX);
    
25.                     String uuid = FileUtil.uuid();
    
26.                     try {
    
27.                         uFile.setPath(uploadFile(uuid,file) +uuid+"."+SUFFIX);
    
28.                     } catch (IOException e) {
    
29.                         e.printStackTrace();
    
30.                     }
    
31.                      fileService.save(uFile);
    
32.                 }
    
33.             }
    
34.         }
    
35.     }
    
36.     return R.ok();
    
37. }

复造代码

上传文件到当地的静态办法

1. /**
   
2.      * 上传文件
   
3.      *@author lyy
   
4.      * @param file
   
5.      * @return
   
6.      * @throws IOException
   
7.      * @throws IllegalStateException
   
8.      */
   
9.     public static String uploadFile(String uuid, MultipartFile file) throws IllegalStateException, IOException {
   
10.         String defaultUrl = MyFileConfig.getFilePath();
    
11.         String Directory = java.io.File.separator ;
    
12.         String realUrl = defaultUrl + Directory;
    
13.         java.io.File realFile = new  java.io.File(realUrl);
    
14.         if (!realFile.exists() && !realFile.isDirectory()) {
    
15.             realFile.mkdirs();
    
16.         }
    
17.         String fullFile = realUrl + uuid + "."+FileUtil.getFileExt(file.getOriginalFilename());
    
18.         file.transferTo(new java.io. File(fullFile));
    
19.         String relativePlanUrl = Directory;
    
20.         return relativePlanUrl.replaceAll("\", "/");
    
21.     }

复造代码

 到此那篇闭于Vue+Element+Springboot图片上传的完成示例的文章便引见到那了,更多相干Vue+Element+Springboot图片上传内乱容请搜刮剧本之家畴前的文章或持续浏览上面的相干文章期望各人当前多多撑持剧本之家！
                                                         
       以上所述是云社区专客手艺小编经心给各人收拾整顿的本常识相干引见；期望对亲们进修事情提拔有所协助。                                     若有任何疑问、相干分享交换等，可正在本文章底部留行或批评； 欢送IT手艺妙手亦或菜鸟们各持己见、万马齐喑，让云社区成为IT手艺更好的交换进修仄台；   正在此更万分感激各人对云社区专客网站的撑持！                                                                                                                                                                                                                                                                                            
滥觞：云社区转戴；            免责声明：假如进犯了您的权益，请联络站少，我们会实时删除侵权内乱容，感谢协作！