SpringBoot文件上传
文件上传
-
引入依赖
<!--文件上传--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency>
-
接收上传的文件
/** * 图片上传 */ @PostMapping("/uploadImg") public R uploadImg(@RequestParam("file") MultipartFile file){ Integer s = goodsImgsService.uploadImg(file); System.out.println(s); return R.success(s); }
-
编写工具类
import org.springframework.stereotype.Component; import org.springframework.util.ResourceUtils; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.util.UUID; /** * @Author Sni * @Date 2023/2/16 21:34 * @Version 1.0 */ @Component public class MyUploadFile { /** * 上传文件 * * @param multipartFile 文件对象 * @return */ public String uploadFile(MultipartFile multipartFile) { try { // 获取上传文件的名称 String originalFilename = multipartFile.getOriginalFilename(); // 文件名后缀 String fileSuffix = originalFilename.substring(originalFilename.lastIndexOf(".")); // 利用UUID生成文件名 String uuid = String.valueOf(UUID.randomUUID()); // 获取指定的路径-在target\classes\static\upload\img\goods String basePath = ResourceUtils.getURL("classpath:").getPath() + "static/upload/img/goods/"; // 新的文件名,使用UUID生成文件名,防止后期重名 String fileName = uuid + fileSuffix; // 创建新的文件 File fileExist = new File(basePath); // 文件夹不存在,则新建 if (!fileExist.exists()) { fileExist.mkdirs(); } // 获取文件对象 File file = new File(basePath, fileName); // 完成文件的上传 multipartFile.transferTo(file); // 返回路径 return "/upload/img/goods/"+fileName; } catch (Exception e) { e.printStackTrace(); } return "error"; } }
前端代码(Vue+ElementUI)
<el-form-item label="样图上传"> <el-upload ref="upload" :action="BASE_API+'/goods-imgs/uploadImg'" list-type="picture-card" :on-success="handleAvatarSuccess" > <i class="el-icon-plus"></i> </el-upload> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> <!-- 获取响应数据 --> <script> export default { data(){ return{ BASE_API:process.env.BASE_API,//IP地址+端口号 } }, methods: { handleAvatarSuccess(response,file,fileList){ this.form.goodsImgsId = response.data console.log(response);//获取上传文件后响应到的数据 } } } </script>