FastDfs在项目中的实际应用
FastDfs在项目中的实际应用主要有如下：
- 实现图片的上传
- 实现图片从网页地址栏输入ip://group/M00进行获取图片
- 实现图片在HTML文档使用img的src实现显示
- 实现图片的回显
- 实现图片的下载
- 实现文件的上传
- 实现文件的下载
下面，就是对这五种实际需求进行开发测试，由于会遗忘，所以会进行制作开发笔记。
项目的前期准备：
1、Linux环境的FastDFS与Nginx的整合安装有具体的文档，在这不做细节描述。
2、搭建开发环境：
pom依赖配置文件：
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.hui</groupId> <artifactId>FastDFS-Project</artifactId> <version>1.0-SNAPSHOT</version> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.6.3</version> </parent> <dependencies> <!-- web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- fastdfs --> <dependency> <groupId>com.github.tobato</groupId> <artifactId>fastdfs-client</artifactId> <version>1.26.5</version> </dependency> <!-- lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.1.37</version> </dependency> </dependencies> </project>application.yml项目配置文件：
server: port: 8080 spring: application: name: FastDFS-Project #THYMELEAF thymeleaf: cache: false #FastDFS fdfs: connect-timeout: 1500 so-timeout: 1500 tracker-list: - 192.168.205.138:22122SpringBootApplication主启动类
/**
* @Description: FastDFS在项目中常见的操作
* @Author: huidou 惠豆
* @CreateTime: 2022/6/20 0:14
*/
@SpringBootApplication
@Slf4j
public class SpringBootFastDFS {
public static void main(String[] args) {
SpringApplication.run(SpringBootFastDFS.class,args);
log.info("**************SpringBootFastDFS 项目启动**************8");
}
}
第一、实现图片的上传
- 创建一个前端页面 index.html 用于实现上传页面
<!DOCTYPE html> <html lang="zh"> <head> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" /> <title>上传图片</title> <script src="js/jquery-1.9.1.js"></script> </head> <body> <!-- 上传图片 --> <form id="FromUpload" action="/fastdfs/UploadImgFile" method="post" class="layui-form" style="margin-left: 140px;margin-top: 50px" enctype="multipart/form-data"> <!--mainImg--> <div class="layui-form-item" style="margin-left: 130px;"> <label class="layui-form-label" style="width: 120px;">上传图片</label> <div class="layui-input-block"> <input id="input_file" type="file" name="file" /> <input type="submit" id="doSave" style="margin-left: 170px;margin-top: -40px" value="提交表单"/> </div> </div> </form> </body> </html>
- 后端控制层代码实现将获得到的图片进行上传到fastdfs上，并且进行返回文件的路径信息
/**
* @Description: 对FastDFS的操作-控制层
* @Author: huidou 惠豆
* @CreateTime: 2022/6/20 0:16
*/
@RestController
@RequestMapping("/fastdfs")
public class FastDfsController {
@Autowired
private FastFileStorageClient fastFileStorageClient;
// 上传图片
@RequestMapping("/UploadImgFile")
public String uploadImgFile(@RequestParam MultipartFile file, HttpServletRequest request) {
// 1、将上传的文件存放在本地
String realPath = request.getSession().getServletContext().getRealPath("/upload");
System.out.println("realPath============" + realPath);
File dir = new File(realPath);
if (!dir.exists()){
dir.mkdirs();
}
String filename = file.getOriginalFilename();
filename = UUID.randomUUID() + "_" + filename;
System.out.println("filename============" + filename);
File newFile = new File(dir, filename);
// 文件后缀
int index = filename.indexOf('.');
String suffix = filename.substring(index + 1);
System.out.println("suffix============" + suffix);
try {
file.transferTo(newFile);
// 2、从本地将文件的路径获取到，然后将文件通过工具类上传到FastDfs中
FastDfsUtils fastDfsUtils = new FastDfsUtils();
//获取本地文件
String fileRealPath = realPath + "\\" + filename;
File fileFDFS = new File(fileRealPath);
//创建传输文件的输入流
FileInputStream fileInputStream = new FileInputStream(fileFDFS);
/**
* 文件上传：
* 参数一：传输文件内容的输入流；
* 参数二：文件的size；
* 参数三：文件扩展名；
* 参数四：描述文件的元数据；返回值：上传文件在存储节点的唯一标识（卷名+文件名）
*/
StorePath storePath = fastFileStorageClient.uploadFile(fileInputStream, fileFDFS.length(), suffix, null);
String getFullPath = storePath.getFullPath();
System.out.println("全路径：" + getFullPath);
return "200";
} catch (IOException e) {
e.printStackTrace();
}
return "500";
}
}
- 测试，上传图片，如图：
- 测试结果：
第二、实现图片从网页地址栏输入ip://group/M00进行获取图片
第一个成功之后就会返回一个String类型的字符串，该字符串包含了该图片的所有的路径，这个时候就只需要将其进行复制，通过网页进行访问即可实现：
第三、实现图片在HTML文档使用img的src实现显示
- 创建一个img.html文档，用于实现通过img标签进行显示图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现img对图片的显示</title> </head> <body> <img style="width: 450px;margin: auto;" src="http://192.168.205.138:8888/group1/M00/00/00/wKjNimKv4PiASV-PAA8DiSPiZDA194.JPG" alt="来自Fastdfs的图片"> </body> </html>
- 后台代码
在这里我并没有编写后台的代码，一般情况下都是使用图片的回显进行实现，这个时候就需要在后台向前端页面返回图片的路径。 在后端代码中，可以通过ModelAndView 或 Model 或者 Session等实现路径的携带。
- 测试结果： 成功！
第四、实现图片的回显
实现图片的回显，是在项目中最常见的功能，特别是在电商项目中，添加商品的时候，就会在表单对商品的图片进行回显按。
- 编写一个前端页面，用于实现添加商品图片，使用异步的方式
- 注意：还需要一个Jquery的插件：jquery-form.js插件，这个插件能方便的对表单信息进行获取操作，进行异步提交。
- jquery-form.js代码：
!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):e("undefined"!=typeof jQuery?jQuery:window.Zepto)}(function(e){"use strict";function t(t){var r=t.data;t.isDefaultPrevented()||(t.preventDefault(),e(t.target).ajaxSubmit(r))}function r(t){var r=t.target,a=e(r);if(!a.is("[type=submit],[type=image]")){var n=a.closest("[type=submit]");if(0===n.length)return;r=n[0]}var i=this;if(i.clk=r,"image"==r.type)if(void 0!==t.offsetX)i.clk_x=t.offsetX,i.clk_y=t.offsetY;else if("function"==typeof e.fn.offset){var o=a.offset();i.clk_x=t.pageX-o.left,i.clk_y=t.pageY-o.top}else i.clk_x=t.pageX-r.offsetLeft,i.clk_y=t.pageY-r.offsetTop;setTimeout(function(){i.clk=i.clk_x=i.clk_y=null},100)}function a(){if(e.fn.ajaxSubmit.debug){var t="[jquery.form] "+Array.prototype.join.call(arguments,"");window.console&&window.console.log?window.console.log(t):window.opera&&window.opera.postError&&window.opera.postError(t)}}var n={};n.fileapi=void 0!==e("<input type='file'/>").get(0).files,n.formdata=void 0!==window.FormData;var i=!!e.fn.prop;e.fn.attr2=function(){if(!i)return this.attr.apply(this,arguments);var e=this.prop.apply(this,arguments);return e&&e.jquery||"string"==typeof e?e:this.attr.apply(this,arguments)},e.fn.ajaxSubmit=function(t){function r(r){var a,n,i=e.param(r,t.traditional).split("&"),o=i.length,s=[];for(a=0;o>a;a++)i[a]=i[a].replace(/\+/g," "),n=i[a].split("="),s.push([decodeURIComponent(n[0]),decodeURIComponent(n[1])]);return s}function o(a){for(var n=new FormData,i=0;i<a.length;i++)n.append(a[i].name,a[i].value);if(t.extraData){var o=r(t.extraData);for(i=0;i<o.length;i++)o[i]&&n.append(o[i][0],o[i][1])}t.data=null;var s=e.extend(!0,{},e.ajaxSettings,t,{contentType:!1,processData:!1,cache:!1,type:u||"POST"});t.uploadProgress&&(s.xhr=function(){var r=e.ajaxSettings.xhr();return r.upload&&r.upload.addEventListener("progress",function(e){var r=0,a=e.loaded||e.position,n=e.total;e.lengthComputable&&(r=Math.ceil(a/n*100)),t.uploadProgress(e,a,n,r)},!1),r}),s.data=null;var c=s.beforeSend;return s.beforeSend=function(e,r){r.data=t.formData?t.formData:n,c&&c.call(this,e,r)},e.ajax(s)}function s(r){function n(e){var t=null;try{e.contentWindow&&(t=e.contentWindow.document)}catch(r){a("cannot get iframe.contentWindow document: "+r)}if(t)return t;try{t=e.contentDocument?e.contentDocument:e.document}catch(r){a("cannot get iframe.contentDocument: "+r),t=e.document}return t}function o(){function t(){try{var e=n(g).readyState;a("state = "+e),e&&"uninitialized"==e.toLowerCase()&&setTimeout(t,50)}catch(r){a("Server abort: ",r," (",r.name,")"),s(k),j&&clearTimeout(j),j=void 0}}var r=f.attr2("target"),i=f.attr2("action"),o="multipart/form-data",c=f.attr("enctype")||f.attr("encoding")||o;w.setAttribute("target",p),(!u||/post/i.test(u))&&w.setAttribute("method","POST"),i!=m.url&&w.setAttribute("action",m.url),m.skipEncodingOverride||u&&!/post/i.test(u)||f.attr({encoding:"multipart/form-data",enctype:"multipart/form-data"}),m.timeout&&(j=setTimeout(function(){T=!0,s(D)},m.timeout));var l=[];try{if(m.extraData)for(var d in m.extraData)m.extraData.hasOwnProperty(d)&&l.push(e.isPlainObject(m.extraData[d])&&m.extraData[d].hasOwnProperty("name")&&m.extraData[d].hasOwnProperty("value")?e('<input type="hidden" name="'+m.extraData[d].name+'">').val(m.extraData[d].value).appendTo(w)[0]:e('<input type="hidden" name="'+d+'">').val(m.extraData[d]).appendTo(w)[0]);m.iframeTarget||v.appendTo("body"),g.attachEvent?g.attachEvent("onload",s):g.addEventListener("load",s,!1),setTimeout(t,15);try{w.submit()}catch(h){var x=document.createElement("form").submit;x.apply(w)}}finally{w.setAttribute("action",i),w.setAttribute("enctype",c),r?w.setAttribute("target",r):f.removeAttr("target"),e(l).remove()}}function s(t){if(!x.aborted&&!F){if(M=n(g),M||(a("cannot access response document"),t=k),t===D&&x)return x.abort("timeout"),void S.reject(x,"timeout");if(t==k&&x)return x.abort("server abort"),void S.reject(x,"error","server abort");if(M&&M.location.href!=m.iframeSrc||T){g.detachEvent?g.detachEvent("onload",s):g.removeEventListener("load",s,!1);var r,i="success";try{if(T)throw"timeout";var o="xml"==m.dataType||M.XMLDocument||e.isXMLDoc(M);if(a("isXml="+o),!o&&window.opera&&(null===M.body||!M.body.innerHTML)&&--O)return a("requeing onLoad callback, DOM not available"),void setTimeout(s,250);var u=M.body?M.body:M.documentElement;x.responseText=u?u.innerHTML:null,x.responseXML=M.XMLDocument?M.XMLDocument:M,o&&(m.dataType="xml"),x.getResponseHeader=function(e){var t={"content-type":m.dataType};return t[e.toLowerCase()]},u&&(x.status=Number(u.getAttribute("status"))||x.status,x.statusText=u.getAttribute("statusText")||x.statusText);var c=(m.dataType||"").toLowerCase(),l=/(json|script|text)/.test(c);if(l||m.textarea){var f=M.getElementsByTagName("textarea")[0];if(f)x.responseText=f.value,x.status=Number(f.getAttribute("status"))||x.status,x.statusText=f.getAttribute("statusText")||x.statusText;else if(l){var p=M.getElementsByTagName("pre")[0],h=M.getElementsByTagName("body")[0];p?x.responseText=p.textContent?p.textContent:p.innerText:h&&(x.responseText=h.textContent?h.textContent:h.innerText)}}else"xml"==c&&!x.responseXML&&x.responseText&&(x.responseXML=X(x.responseText));try{E=_(x,c,m)}catch(y){i="parsererror",x.error=r=y||i}}catch(y){a("error caught: ",y),i="error",x.error=r=y||i}x.aborted&&(a("upload aborted"),i=null),x.status&&(i=x.status>=200&&x.status<300||304===x.status?"success":"error"),"success"===i?(m.success&&m.success.call(m.context,E,"success",x),S.resolve(x.responseText,"success",x),d&&e.event.trigger("ajaxSuccess",[x,m])):i&&(void 0===r&&(r=x.statusText),m.error&&m.error.call(m.context,x,i,r),S.reject(x,"error",r),d&&e.event.trigger("ajaxError",[x,m,r])),d&&e.event.trigger("ajaxComplete",[x,m]),d&&!--e.active&&e.event.trigger("ajaxStop"),m.complete&&m.complete.call(m.context,x,i),F=!0,m.timeout&&clearTimeout(j),setTimeout(function(){m.iframeTarget?v.attr("src",m.iframeSrc):v.remove(),x.responseXML=null},100)}}}var c,l,m,d,p,v,g,x,y,b,T,j,w=f[0],S=e.Deferred();if(S.abort=function(e){x.abort(e)},r)for(l=0;l<h.length;l++)c=e(h[l]),i?c.prop("disabled",!1):c.removeAttr("disabled");if(m=e.extend(!0,{},e.ajaxSettings,t),m.context=m.context||m,p="jqFormIO"+(new Date).getTime(),m.iframeTarget?(v=e(m.iframeTarget),b=v.attr2("name"),b?p=b:v.attr2("name",p)):(v=e('<iframe name="'+p+'" src="'+m.iframeSrc+'" />'),v.css({position:"absolute",top:"-1000px",left:"-1000px"})),g=v[0],x={aborted:0,responseText:null,responseXML:null,status:0,statusText:"n/a",getAllResponseHeaders:function(){},getResponseHeader:function(){},setRequestHeader:function(){},abort:function(t){var r="timeout"===t?"timeout":"aborted";a("aborting upload... "+r),this.aborted=1;try{g.contentWindow.document.execCommand&&g.contentWindow.document.execCommand("Stop")}catch(n){}v.attr("src",m.iframeSrc),x.error=r,m.error&&m.error.call(m.context,x,r,t),d&&e.event.trigger("ajaxError",[x,m,r]),m.complete&&m.complete.call(m.context,x,r)}},d=m.global,d&&0===e.active++&&e.event.trigger("ajaxStart"),d&&e.event.trigger("ajaxSend",[x,m]),m.beforeSend&&m.beforeSend.call(m.context,x,m)===!1)return m.global&&e.active--,S.reject(),S;if(x.aborted)return S.reject(),S;y=w.clk,y&&(b=y.name,b&&!y.disabled&&(m.extraData=m.extraData||{},m.extraData[b]=y.value,"image"==y.type&&(m.extraData[b+".x"]=w.clk_x,m.extraData[b+".y"]=w.clk_y)));var D=1,k=2,A=e("meta[name=csrf-token]").attr("content"),L=e("meta[name=csrf-param]").attr("content");L&&A&&(m.extraData=m.extraData||{},m.extraData[L]=A),m.forceSync?o():setTimeout(o,10);var E,M,F,O=50,X=e.parseXML||function(e,t){return window.ActiveXObject?(t=new ActiveXObject("Microsoft.XMLDOM"),t.async="false",t.loadXML(e)):t=(new DOMParser).parseFromString(e,"text/xml"),t&&t.documentElement&&"parsererror"!=t.documentElement.nodeName?t:null},C=e.parseJSON||function(e){return window.eval("("+e+")")},_=function(t,r,a){var n=t.getResponseHeader("content-type")||"",i="xml"===r||!r&&n.indexOf("xml")>=0,o=i?t.responseXML:t.responseText;return i&&"parsererror"===o.documentElement.nodeName&&e.error&&e.error("parsererror"),a&&a.dataFilter&&(o=a.dataFilter(o,r)),"string"==typeof o&&("json"===r||!r&&n.indexOf("json")>=0?o=C(o):("script"===r||!r&&n.indexOf("javascript")>=0)&&e.globalEval(o)),o};return S}if(!this.length)return a("ajaxSubmit: skipping submit process - no element selected"),this;var u,c,l,f=this;"function"==typeof t?t={success:t}:void 0===t&&(t={}),u=t.type||this.attr2("method"),c=t.url||this.attr2("action"),l="string"==typeof c?e.trim(c):"",l=l||window.location.href||"",l&&(l=(l.match(/^([^#]+)/)||[])[1]),t=e.extend(!0,{url:l,success:e.ajaxSettings.success,type:u||e.ajaxSettings.type,iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank"},t);var m={};if(this.trigger("form-pre-serialize",[this,t,m]),m.veto)return a("ajaxSubmit: submit vetoed via form-pre-serialize trigger"),this;if(t.beforeSerialize&&t.beforeSerialize(this,t)===!1)return a("ajaxSubmit: submit aborted via beforeSerialize callback"),this;var d=t.traditional;void 0===d&&(d=e.ajaxSettings.traditional);var p,h=[],v=this.formToArray(t.semantic,h);if(t.data&&(t.extraData=t.data,p=e.param(t.data,d)),t.beforeSubmit&&t.beforeSubmit(v,this,t)===!1)return a("ajaxSubmit: submit aborted via beforeSubmit callback"),this;if(this.trigger("form-submit-validate",[v,this,t,m]),m.veto)return a("ajaxSubmit: submit vetoed via form-submit-validate trigger"),this;var g=e.param(v,d);p&&(g=g?g+"&"+p:p),"GET"==t.type.toUpperCase()?(t.url+=(t.url.indexOf("?")>=0?"&":"?")+g,t.data=null):t.data=g;var x=[];if(t.resetForm&&x.push(function(){f.resetForm()}),t.clearForm&&x.push(function(){f.clearForm(t.includeHidden)}),!t.dataType&&t.target){var y=t.success||function(){};x.push(function(r){var a=t.replaceTarget?"replaceWith":"html";e(t.target)[a](r).each(y,arguments)})}else t.success&&x.push(t.success);if(t.success=function(e,r,a){for(var n=t.context||this,i=0,o=x.length;o>i;i++)x[i].apply(n,[e,r,a||f,f])},t.error){var b=t.error;t.error=function(e,r,a){var n=t.context||this;b.apply(n,[e,r,a,f])}}if(t.complete){var T=t.complete;t.complete=function(e,r){var a=t.context||this;T.apply(a,[e,r,f])}}var j=e("input[type=file]:enabled",this).filter(function(){return""!==e(this).val()}),w=j.length>0,S="multipart/form-data",D=f.attr("enctype")==S||f.attr("encoding")==S,k=n.fileapi&&n.formdata;a("fileAPI :"+k);var A,L=(w||D)&&!k;t.iframe!==!1&&(t.iframe||L)?t.closeKeepAlive?e.get(t.closeKeepAlive,function(){A=s(v)}):A=s(v):A=(w||D)&&k?o(v):e.ajax(t),f.removeData("jqxhr").data("jqxhr",A);for(var E=0;E<h.length;E++)h[E]=null;return this.trigger("form-submit-notify",[this,t]),this},e.fn.ajaxForm=function(n){if(n=n||{},n.delegation=n.delegation&&e.isFunction(e.fn.on),!n.delegation&&0===this.length){var i={s:this.selector,c:this.context};return!e.isReady&&i.s?(a("DOM not ready, queuing ajaxForm"),e(function(){e(i.s,i.c).ajaxForm(n)}),this):(a("terminating; zero elements found by selector"+(e.isReady?"":" (DOM not ready)")),this)}return n.delegation?(e(document).off("submit.form-plugin",this.selector,t).off("click.form-plugin",this.selector,r).on("submit.form-plugin",this.selector,n,t).on("click.form-plugin",this.selector,n,r),this):this.ajaxFormUnbind().bind("submit.form-plugin",n,t).bind("click.form-plugin",n,r)},e.fn.ajaxFormUnbind=function(){return this.unbind("submit.form-plugin click.form-plugin")},e.fn.formToArray=function(t,r){var a=[];if(0===this.length)return a;var i,o=this[0],s=this.attr("id"),u=t?o.getElementsByTagName("*"):o.elements;if(u&&!/MSIE [678]/.test(navigator.userAgent)&&(u=e(u).get()),s&&(i=e(':input[form="'+s+'"]').get(),i.length&&(u=(u||[]).concat(i))),!u||!u.length)return a;var c,l,f,m,d,p,h;for(c=0,p=u.length;p>c;c++)if(d=u[c],f=d.name,f&&!d.disabled)if(t&&o.clk&&"image"==d.type)o.clk==d&&(a.push({name:f,value:e(d).val(),type:d.type}),a.push({name:f+".x",value:o.clk_x},{name:f+".y",value:o.clk_y}));else if(m=e.fieldValue(d,!0),m&&m.constructor==Array)for(r&&r.push(d),l=0,h=m.length;h>l;l++)a.push({name:f,value:m[l]});else if(n.fileapi&&"file"==d.type){r&&r.push(d);var v=d.files;if(v.length)for(l=0;l<v.length;l++)a.push({name:f,value:v[l],type:d.type});else a.push({name:f,value:"",type:d.type})}else null!==m&&"undefined"!=typeof m&&(r&&r.push(d),a.push({name:f,value:m,type:d.type,required:d.required}));if(!t&&o.clk){var g=e(o.clk),x=g[0];f=x.name,f&&!x.disabled&&"image"==x.type&&(a.push({name:f,value:g.val()}),a.push({name:f+".x",value:o.clk_x},{name:f+".y",value:o.clk_y}))}return a},e.fn.formSerialize=function(t){return e.param(this.formToArray(t))},e.fn.fieldSerialize=function(t){var r=[];return this.each(function(){var a=this.name;if(a){var n=e.fieldValue(this,t);if(n&&n.constructor==Array)for(var i=0,o=n.length;o>i;i++)r.push({name:a,value:n[i]});else null!==n&&"undefined"!=typeof n&&r.push({name:this.name,value:n})}}),e.param(r)},e.fn.fieldValue=function(t){for(var r=[],a=0,n=this.length;n>a;a++){var i=this[a],o=e.fieldValue(i,t);null===o||"undefined"==typeof o||o.constructor==Array&&!o.length||(o.constructor==Array?e.merge(r,o):r.push(o))}return r},e.fieldValue=function(t,r){var a=t.name,n=t.type,i=t.tagName.toLowerCase();if(void 0===r&&(r=!0),r&&(!a||t.disabled||"reset"==n||"button"==n||("checkbox"==n||"radio"==n)&&!t.checked||("submit"==n||"image"==n)&&t.form&&t.form.clk!=t||"select"==i&&-1==t.selectedIndex))return null;if("select"==i){var o=t.selectedIndex;if(0>o)return null;for(var s=[],u=t.options,c="select-one"==n,l=c?o+1:u.length,f=c?o:0;l>f;f++){var m=u[f];if(m.selected){var d=m.value;if(d||(d=m.attributes&&m.attributes.value&&!m.attributes.value.specified?m.text:m.value),c)return d;s.push(d)}}return s}return e(t).val()},e.fn.clearForm=function(t){return this.each(function(){e("input,select,textarea",this).clearFields(t)})},e.fn.clearFields=e.fn.clearInputs=function(t){var r=/^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i;return this.each(function(){var a=this.type,n=this.tagName.toLowerCase();r.test(a)||"textarea"==n?this.value="":"checkbox"==a||"radio"==a?this.checked=!1:"select"==n?this.selectedIndex=-1:"file"==a?/MSIE/.test(navigator.userAgent)?e(this).replaceWith(e(this).clone(!0)):e(this).val(""):t&&(t===!0&&/hidden/.test(a)||"string"==typeof t&&e(this).is(t))&&(this.value="")})},e.fn.resetForm=function(){return this.each(function(){("function"==typeof this.reset||"object"==typeof this.reset&&!this.reset.nodeType)&&this.reset()})},e.fn.enable=function(e){return void 0===e&&(e=!0),this.each(function(){this.disabled=!e})},e.fn.selected=function(t){return void 0===t&&(t=!0),this.each(function(){var r=this.type;if("checkbox"==r||"radio"==r)this.checked=t;else if("option"==this.tagName.toLowerCase()){var a=e(this).parent("select");t&&a[0]&&"select-one"==a[0].type&&a.find("option").selected(!1),this.selected=t}})},e.fn.ajaxSubmit.debug=!1});
- 编写一个前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片回显测试</title>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-form.js"></script>
</head>
<body>
<table style="border: 2px solid black;width: 800px;margin: auto;height: 500px">
<!-- 图片 -->
<tr style="width: 500px;">
<td>
上传图片：
</td>
<td>
<!-- 添加商品图片 -->
<form id="uploadForm" enctype="multipart/form-data">
<div>
<div>
<input type="file" name="file" />
<input type="button" id="doSave" value="点击上传图片"/>
</div>
</div>
</form>
</td>
</tr>
<!-- 回显 -->
<tr style="width: 500px">
<td>
回显图片：
</td>
<td>
<div id="imgDiv" style="width: 200px;margin: auto;"></div>
</td>
</tr>
</table>
</body>
<script type="text/javascript">
$(function() {
$("#doSave").click(function() {
$("#uploadForm").ajaxSubmit({
type : 'post',
url : "/fastdfs/UploadImgFile",
contentType : "application/x-www-form-urlencoded; charset=utf-8",
dataType: "json",
success: function(result) {
//清空div
$("#imgDiv").empty();
//创建一个图片的标签
var imgObj = $("<img>");
imgObj.attr("src","http://192.168.205.138:8888/" + result.fastPath);
imgObj.attr("width","200px");
imgObj.attr("height","200px");
//将图片追加到imgDiv
$("#imgDiv").append(imgObj);
},
error: function (result) {
alert("出错");
}
});
});
});
</script>
</html>
- 对这个前端页面的部分解释
引入jquery文件
<script src="js/jquery-1.9.1.js"></script>
要想实现表单的异步提交，需要使用jquery-form.js这个插件，个人爱好，不添加会出错，ajax失效
<script src="js/jquery-form.js"></script>
<div id="imgDiv" style="width: 200px;margin: auto;"></div>
//清空div
$("#imgDiv").empty();
//创建一个图片的标签
var imgObj = $("<img>");
imgObj.attr("src","http://192.168.205.138:8888/" + result.fastPath);
imgObj.attr("width","200px");
imgObj.attr("height","200px");
//将图片追加到imgDiv
$("#imgDiv").append(imgObj);
- 图片的上传与回显的后端代码
/**
* @Description: 对FastDFS的操作-控制层
* @Author: huidou 惠豆
* @CreateTime: 2022/6/20 0:16
*/
@RestController
@RequestMapping("/fastdfs")
public class FastDfsController {
@Autowired
private FastFileStorageClient fastFileStorageClient;
// 上传图片
@RequestMapping("/UploadImgFile")
public HashMap uploadImgFile(@RequestParam MultipartFile file, HttpServletRequest request) {
// 1、将上传的文件存放在本地
String realPath = request.getSession().getServletContext().getRealPath("/upload");
System.out.println("realPath============" + realPath);
File dir = new File(realPath);
if (!dir.exists()){
dir.mkdirs();
}
String filename = file.getOriginalFilename();
filename = UUID.randomUUID() + "_" + filename;
System.out.println("filename============" + filename);
File newFile = new File(dir, filename);
// 文件后缀
int index = filename.indexOf('.');
String suffix = filename.substring(index + 1);
System.out.println("suffix============" + suffix);
try {
file.transferTo(newFile);
// 2、从本地将文件的路径获取到，然后将文件通过工具类上传到FastDfs中
FastDfsUtils fastDfsUtils = new FastDfsUtils();
//获取本地文件
String fileRealPath = realPath + "\\" + filename;
File fileFDFS = new File(fileRealPath);
//创建传输文件的输入流
FileInputStream fileInputStream = new FileInputStream(fileFDFS);
/**
* 文件上传：
* 参数一：传输文件内容的输入流；
* 参数二：文件的size；
* 参数三：文件扩展名；
* 参数四：描述文件的元数据；返回值：上传文件在存储节点的唯一标识（卷名+文件名）
*/
StorePath storePath = fastFileStorageClient.uploadFile(fileInputStream, fileFDFS.length(), suffix, null);
String getFullPath = storePath.getFullPath();
System.out.println("全路径：" + getFullPath);
HashMap<String, String> hashMap = new HashMap<>();
hashMap.put("fastPath",getFullPath);
return hashMap;
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
- 测试结果：
- 测试结果：
- 或许存在的问题
注意：在这里如果出现了错误异常描述的是文件大小限制出现问题，这个时候就需要配置上传文件的大小
server:
port: 8080
spring:
servlet:
multipart:
# 设置 上传文件的大小
max-file-size: 3MB
# 设置 整个请求的大小
max-request-size: 15MB
application:
name: FastDFS-Project
#THYMELEAF
thymeleaf:
cache: false
#FastDFS
fdfs:
connect-timeout: 1500
so-timeout: 1500
tracker-list:
- 192.168.205.138:22122
第五、实现图片的下载
这个功能也是很常见的，毕竟FastDFS是一个对文件管理的分布式系统，就会涉及文件的下载，而实现图片的下载，就是客户端看见有一个图片，可以对他进行下载，这个下载就是通过图片的路径，发送请求，在FastDFS中找到对应的图片。
- 首先，创建一个前端页面，进行对具体的图片进行下载
- 编写后台文件下载的代码
// 下载文件
@RequestMapping("/download")
public String download() {
/**
* 创建两个假的参数，用于描述是从前端传递过来的
*/
String groupPath = "group1";
String notePath = "M00/00/00/wKjNimKv4PiASV-PAA8DiSPiZDA194.JPG";
try {
/**
* 下载文件:
* 参数一：文件处于存储节点的卷名；
* 参数二：文件在存储节点的文件名；
* 参数三：下载的回调函数；返回值：文件内容的字节数组
*/
byte[] bytes = fastFileStorageClient.downloadFile(groupPath, notePath, new DownloadByteArray());
//创建文件输出流，指定输出位置及文件名
FileOutputStream fileOutputStream = new FileOutputStream("C:\\Users\\huidou123\\Desktop\\meinv.jpg");
//使用文件输出流将文件内容字节数组写出
fileOutputStream.write(bytes);
//刷新输出流
fileOutputStream.flush();
//关闭输出流
fileOutputStream.close();
return "下载成功";
} catch (Exception e) {
e.printStackTrace();
return "下载失败";
}
}
- 点击按钮之后，测试结果
第六、实现文件的上传
文件的上传与图片的上传代码是一样的，在这里不需要继续重复代码。
第七、实现文件的下载
文件的下载与图片的下载代码是一样的，在这里不需要继续重复代码。
哔哩哔哩公司氛围 99人发布
