SpringBoot+Vue+Element+FastDFS实现图片的上传功能

Java老铁铁

共 2833字,需浏览 6分钟

 ·

2020-12-05 23:35

点击上方 Java老铁,并选择 设为星标

优质文章和资料会及时送达

添加Maven依赖
  1. <dependency>

  2. <groupId>com.github.tobatogroupId>

  3. <artifactId>fastdfs-clientartifactId>

  4. <version>1.26.2version>

  5. dependency>

编写配置文件
  1. server:

  2. port: 9009

  3. spring:

  4. application:

  5. name: springBoot-upload

  6. servlet:

  7. multipart:

  8. max-file-size: 5MB # 限制文件上传的大小

  9. fdfs:

  10. so-timeout: 1501 # 超时时间

  11. connect-timeout: 601 # 连接超时时间

  12. thumb-image: # 缩略图

  13. width: 60

  14. height: 60

  15. tracker-list: # tracker地址:你的虚拟机服务器地址+端口(默认是22122)

  16. - 192.168.206.140:22122

编写上传的service
  1. @Service

  2. public class UploadService {


  3. private static final Logger LOGGER = LoggerFactory.getLogger(UploadService.class);


  4. private static final List<String> CONTENT_TYPES = Arrays.asList("image/jpeg", "image/gif","image/png");


  5. @Autowired

  6. private FastFileStorageClient storageClient;



  7. public String upload(MultipartFile file) {

  8. //获取文件名称

  9. String originalFilename = file.getOriginalFilename();

  10. //校检文件的类型

  11. String contentType = file.getContentType();

  12. if (!CONTENT_TYPES.contains(contentType)){

  13. LOGGER.info("文件类型不合法:{}",originalFilename);

  14. return null;

  15. }

  16. try {

  17. // 校验文件的内容

  18. BufferedImage bufferedImage = ImageIO.read(file.getInputStream());

  19. if (bufferedImage == null){

  20. LOGGER.info("文件内容不合法:{}", originalFilename);

  21. return null;

  22. }


  23. // 保存到服务器

  24. //file.transferTo(new File("D:\\upload\\images\\" + originalFilename));

  25. String ext = StringUtils.substringAfterLast(originalFilename, ".");

  26. StorePath storePath = this.storageClient.uploadFile(file.getInputStream(), file.getSize(), ext, null);


  27. // 生成url地址,返回

  28. //return "http://127.0.0.1/" + originalFilename;

  29. return "http://192.168.206.140/" + storePath.getFullPath();

  30. } catch (IOException e) {

  31. LOGGER.info("服务器内部错误:{}", originalFilename);

  32. e.printStackTrace();

  33. }

  34. return null;

  35. }

  36. }

编写Controller
  1. @RestController

  2. @RequestMapping("/upload")

  3. @CrossOrigin

  4. public class UploadController {


  5. @Autowired

  6. private UploadService uploadService;


  7. @PostMapping("/image")

  8. public Result uploadImage(@RequestParam("file") MultipartFile file){

  9. String url = this.uploadService.upload(file);

  10. if (StringUtils.isBlank(url)) {

  11. return new Result(true, StatusCode.OK,"上传失败");

  12. }

  13. return new Result(true, StatusCode.OK,"上传成功",url);

  14. }

  15. }

编写前端部分

前端使用了Vue加上ElementUI框架

  1. <div>

  2. <el-upload :action="uploadURL" list-type="picture" :on-preview="handlePreview" multiple>

  3. <el-button size="small" type="primary">点击上传el-button>

  4. el-upload>

  5. <el-dialog :visible.sync="previewVisible" title="图片预览">

  6. <img :src="previewPath" alt="" class="previewImg">

  7. el-dialog>

  8. div>

图片预览的逻辑

  1. // 处理图片预览效果

  2. handlePreview(file) {

  3. console.log(file)

  4. this.previewPath = file.response.data

  5. this.previewVisible = true

  6. },

测试

运行地址:http://localhost:8080/upload

界面

上传

可以一次上传多张图片,点击图片的名字还可以查看预览


前端代码地址:https://gitee.com/mytimelife/fastdfs_vue.git



注:图片来源网络,侵权,联系删除


浏览 33
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报