千家信息网

vue怎么使用el-upload实现文件上传功能

发表于:2025-02-01 作者:千家信息网编辑
千家信息网最后更新 2025年02月01日,这篇文章主要介绍了vue怎么使用el-upload实现文件上传功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用el-upload实现文件上传功能文章都会有
千家信息网最后更新 2025年02月01日vue怎么使用el-upload实现文件上传功能

这篇文章主要介绍了vue怎么使用el-upload实现文件上传功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么使用el-upload实现文件上传功能文章都会有所收获,下面我们一起来看看吧。

upload.vue

springboot后台 uploadController.java

package com.example.demo.controller; import java.io.File;import java.io.FileOutputStream;import java.io.InputStream;import java.util.List; import org.springframework.web.bind.annotation.CrossOrigin;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.PutMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.bind.annotation.RestController;import org.springframework.web.multipart.MultipartFile; import com.example.demo.entity.ListParam;import com.example.demo.entity.MyUser;import com.example.demo.entity.Result; @RestController@ResponseBody@CrossOrigin@RequestMapping("/api")public class UploadController {        @PostMapping("/uploadUi")    public Result upFile(@RequestParam("name")String name,@RequestParam("files") MultipartFile[] files ) {         System.out.println("开始");         System.out.println(name);         if(files != null) {             for(MultipartFile file : files) {                String fileName = file.getOriginalFilename();                System.out.println(fileName);                try{                    File mkdir = new File("F:\\app\\file");                    if(!mkdir.exists()) {                        mkdir.mkdirs();                    }                    //定义输出流,将文件写入硬盘                     FileOutputStream os = new FileOutputStream(mkdir.getPath()+"\\"+fileName);                      InputStream in = file.getInputStream();                      int b = 0;                      while((b=in.read())!=-1){ //读取文件                         os.write(b);                      }                      os.flush(); //关闭流                       in.close();                      os.close();                                      }catch(Exception  e) {                    e.printStackTrace();                    return new Result(401,"失败");                }            }             return new Result(200,"成功");         }else {             return new Result(401,"文件找不到");         }            }    }

关于"vue怎么使用el-upload实现文件上传功能"这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对"vue怎么使用el-upload实现文件上传功能"知识都有一定的了解,大家如果还想学习更多知识,欢迎关注行业资讯频道。

0