使用Webupload上传图片到FastDFS分布式文件系统

使用Webupload插件上传图片到FastDFS分布式文件系统。

前提条件：1.已安装FastDFS分布式文件系统

2.使用webuploader插件上传文件

3.maven工程已引入FastDFS依赖

图片上传及图片回显部分代码如下：

<!-- 添加商品页面 --><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><base th:href="|${#request.getContextPath()}/|"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="resources/css/reset.css" type="text/css"media="screen" /><link rel="stylesheet" href="resources/css/style.css" type="text/css"media="screen" /><link rel="stylesheet" href="resources/css/invalid.css" type="text/css"media="screen" /><script type="text/javascript"src="resources/scripts/jquery-1.8.3.min.js"></script><!-- 引入上传控件 webuploader --><link rel="stylesheet" href="resources/widget/webuploader/webuploader.css" type="text/css"media="screen" /><script type="text/javascript" src="resources/widget/webuploader/webuploader.min.js"></script><script>var uploader;$(function(){//初始化webuploader插件
            uploader = WebUploader.create({// 选完文件后，是否自动上传。
                auto: false,// swf文件路径
                swf: 'resources/widget/webuploader/Uploader.swf',// 文件接收服务端。
                server: '/imgs/uploader',// 选择文件的按钮。可选。// 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',// 只允许选择图片文件。
                accept: {title: 'Images',extensions: 'gif,jpg,jpeg,bmp,png',mimeTypes: 'image/*'}});//给webuploader绑定事件//fileQueued  当文件被加入队列以后触发
            uploader.on("fileQueued",function (file) {//生成图片缩略图
                uploader.makeThumb( file, function (error ,ret) {if(error){alert(file.name+"缩略图生成失败")}else{//将缩略图展示到预览图div中var img = "<img src=\""+ret+"\" style=\"height: 100px; width: 100px; margin-right: 5px;\"/>"$("#imgs_div").append(img);}}, 100, 100 )});//给webupload绑定成功事件
            uploader.on("uploadSuccess",function (file,response) {var val = $("#image_paths").val();//获取images_path标签值if(val.length > 0){val += "|";}val += response.imgUrl;$("#image_paths").val(val);//设置images_path标签值
            })});/*** 上传图片*/function upload_imgs(){if(uploader){uploader.upload();}}</script></head>
<body>
<div id="main-content"><div class="content-box"><div class="content-box-content"><div class="tab-content default-tab" id="tab2"><form action="/goods/insert" method="post"><fieldset><!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns --><p><label>商品名称</label> <inputclass="text-input small-input" type="text"name="gname" /></p><p><label>商品图片</label><!--dom结构部分--><div id="uploader-demo"><!-- 存放上传图片的预览图 --><div id="imgs_div" style="border: solid 1px #D0D0D0; width: 500px; height: 120px; margin-bottom: 10px; padding: 20px;"><!-- <img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/><img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/><img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/><img src="xxx" style="height: 100px; width: 100px; margin-right: 5px;"/>--></div><button type="button" class="mybutton" style="margin-bottom: 10px;" onclick="upload_imgs();">上传图片</button><div id="filePicker">选择图片</div><input id="image_paths" type="hidden" name="gimage" value=""/></div></p><p><label>商品价格</label> <inputclass="text-input small-input" type="text"name="gprice" /></p><p><label>商品库存</label> <inputclass="text-input small-input" type="text"name="gsave" /></p><p><label>商品的描述</label><textarea class="text-input textarea wysiwyg"name="ginfo" cols="79" rows="15"></textarea></p><p><input class="mybutton" type="submit" value="提交" /></p></fieldset><div class="clear"></div><!-- End .clear --></form></div><!-- End #tab2 --></div><!-- End .content-box-content --></div>
</div>
<!-- End #main-content -->
</body>
</html>

<!-- 商品列表页面 --><!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><base th:href="|${#request.getContextPath()}/|"/><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><!-- Reset Stylesheet --><link rel="stylesheet" href="resources/css/reset.css" type="text/css"media="screen" /><!-- Main Stylesheet --><link rel="stylesheet" href="resources/css/style.css" type="text/css"media="screen" /><link rel="stylesheet" href="resources/css/invalid.css" type="text/css"media="screen" /><script type="text/javascript"src="resources/scripts/jquery-1.3.2.min.js"></script><!-- jQuery Configuration --><script type="text/javascript"src="resources/scripts/simpla.jquery.configuration.js"></script>
</head>
<body>
<div id="main-content"><div class="content-box"><!-- End .content-box-header --><div class="content-box-content"><div class="tab-content default-tab" id="tab1"><table><thead><tr><th><input class="check-all" type="checkbox" /></th><th>商品名称</th><th>商品图片</th><th>商品描述</th><th>商品价格</th><th>操作</th></tr></thead><tbody><tr th:each="good : ${goods}"><td><input type="checkbox" /></td><td th:text="${good.gname}">Lorem ipsum dolor</td><!--默认展示商品的第一张图片--><td><img style="width: 120px;height: 100px;" th:src="|http://192.168.59.131/${#strings.setSplit(good.gimage,'|')[0]}|"/></td><td th:text="${good.ginfo}">Consectetur adipiscing</td><td th:text="${#numbers.formatCurrency(good.gprice)}">Donec tortor diam</td><td><!-- Icons --> <a href="#" title="Edit"><imgsrc="resources/images/icons/pencil.png" alt="Edit" /></a> <ahref="#" title="Delete"><imgsrc="resources/images/icons/cross.png" alt="Delete" /></a> <ahref="#" title="Edit Meta"><imgsrc="resources/images/icons/hammer_screwdriver.png"alt="Edit Meta" /></a></td></tr></tbody><tfoot><tr><td colspan="6"><div class="bulk-actions align-left"><a class="mybutton" href="/topage/goodsadd">添加商品</a></div><div class="clear"></div></td></tr></tfoot></table></div></div><!-- End .content-box-content --></div>
</div>
<!-- End #main-content -->
</body>
</html>

//ImgControllerimport com.alibaba.fastjson.JSON;
import com.github.tobato.fastdfs.domain.StorePath;
import com.github.tobato.fastdfs.service.FastFileStorageClient;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;@Controller
@RequestMapping("/imgs")
public class ImgController {@Autowiredprivate FastFileStorageClient fastFileStorageClient;//private static final String UPLOAD_PATH = "e:\\imgs";
@RequestMapping("/uploader")@ResponseBodypublic String uploadImg(MultipartFile file) {//获得上传文件后辍的下标 xxx.pngint index = file.getOriginalFilename().lastIndexOf(".");//返回指定字符在此字符串中最后一次出现处的索引String suffix =file.getOriginalFilename().substring(index+1);System.out.println("截取到的文件名后辍： "+suffix);//文件上到FastDFStry {StorePath storePath = fastFileStorageClient.uploadImageAndCrtThumbImage(file.getInputStream(), file.getSize(), suffix, null);//获取上传到FastDFS中图片的路径String imgUrl = storePath.getFullPath();System.out.println("FastDFS中图片的路径: "+imgUrl);//将存FastDFS中图片的路径以JSON方式返回到前端页面Map<String,Object> map = new HashMap<>();map.put("imgUrl",imgUrl);String param = JSON.toJSONString(map);return param;//return "{\"uploadPath\":\"" + imgUrl + "\"}";
} catch (IOException e) {e.printStackTrace();}/* //文件上传到本地磁盘try (InputStream inputStream = file.getInputStream();OutputStream outputStream = new FileOutputStream(UPLOAD_PATH + UUID.randomUUID().toString());) {IOUtils.copy(inputStream, outputStream);} catch (IOException e) {e.printStackTrace();}*/return null;}
}

//GoodsController import com.alibaba.dubbo.config.annotation.Reference;
import com.qf.entity.Goods;
import com.qf.service.IGoodsService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;import java.util.List;@Controller
@RequestMapping("/goods")
public class GoodsController {@Referenceprivate IGoodsService goodsService;/*** 查询商品列表*/@RequestMapping("/list")public String goodslist(ModelMap map){List<Goods> goods = goodsService.queryAll();map.put("goods",goods);return "goodslist";}/*** 新增商品*/@RequestMapping("/insert")public String goodsinsert(Goods goods){int count = goodsService.insert(goods);return "redirect:/goods/list";}
}

//spring boot的入口启动类import com.github.tobato.fastdfs.FdfsClientConfig;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Import;@SpringBootApplication(scanBasePackages = "com.qf")
@Import(FdfsClientConfig.class)
public class ShopBackApplication {public static void main(String[] args) {SpringApplication.run(ShopBackApplication.class, args);}}

posted on 2019-04-10 23:25 Ethon 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/wakey/p/10686951.html

使用Webupload上传图片到FastDFS分布式文件系统相关推荐

Fastdfs分布式文件系统的应用
2019独角兽企业重金招聘Python工程师标准>>> 26 MARCH 2016 on fastdfs, 分布式文件系统我们在实际项目中常常遇到这样的应用场景,用户需要上传图片, ...
大量文件不知道怎么管理，快试试FastDFS(分布式文件系统)
FastDFS(分布式文件系统)入门到精通 GitHub:个人GitHub Blog: 个人博客 1 什么是FastDFS 1.1 简介 FastDFS是用c语言编写的一款开源的分布式文件系统,它是由 ...
FastDFS分布式文件系统详解
FastDFS 简介 FastDFS 是基于 C 语言开发的,是一个轻量级开源的高性能分布式文件系统.主要功能有:文件存储.文件同步.文件访问(文件上传/下载),解决了大容量的文件存储和高并发访问的问 ...
FastDFS分布式文件系统(详细入门级介绍)
分布式文件系统 (Distributed File System) 是一个软件/软件服务器: 这个软件可以用来管理文件: 但这个软件所管理的文件通常不是在一个服务器节点上,而是在多个服务器节点上,这些 ...
搭建自己的云存储空间|FastDFS分布式文件系统考虑一下？
一. 前言最近有很多小伙伴问壹哥,大规模的文件存储该怎么做? 这个感觉很难实现呢.其实这个需求,并没有大家想的那么难以实现.今天壹哥就带着各位,用10分钟的时间来搞定这个需求.不信?那你就跟着壹哥一 ...
FastDFS 分布式文件系统详解
FastDFS 分布式文件系统详解什么是文件系统文件系统是操作系统用于在磁盘或分区上组织文件的方法和数据结构.磁盘空间是什么样的我们并不清楚,但文件系统可以给我们呈现一个非常清晰的表象,我们可以创 ...
Docker安装FastDFS分布式文件系统
Docker安装FastDFS分布式文件系统: 1.首先下载FastDFS文件系统的docker镜像 2.拉取镜像 3.查看镜像 4.使用docker镜像构建tracker容器(跟踪服务器,起到调度的 ...
FastDFS分布式文件系统使用手册
FastDFS分布式文件系统使用手册 1.概述 1.1.FastDFS简介 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100,FastDFS ...
CentOS 7.5下搭建高可用的FastDFS分布式文件系统
FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题 ...
FastDFS分布式文件系统的安装及配置
由于网站使用nfs共享方式保存用户上传的图片,附件等资料,然后通过apache下载的方式供用户访问,在网站架构初期,使用这种简单的方式实现了静态资源的读写分离,但随着网站数据量的增加,图片服务器渐渐成 ...

使用Webupload上传图片到FastDFS分布式文件系统

使用Webupload上传图片到FastDFS分布式文件系统相关推荐

最新文章

热门文章