通过springmvc上传图片至ftp服务器

系统管理员 2022-01-31 04:13 427阅读 0赞

1.  工具类

![20190515162405145.png][]

FtpUtil.java

<table style="margin-left:18pt;width:396.8pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:396.8pt;"> package&nbsp;com.bjsxt.utils; &nbsp; import&nbsp;java.io.FileInputStream; import&nbsp;java.io.IOException; import&nbsp;java.io.InputStream; import&nbsp;java.net.SocketException; import&nbsp;java.util.UUID; &nbsp; import&nbsp;org.apache.commons.net.ftp.FTP; import&nbsp;org.apache.commons.net.ftp.FTPClient; &nbsp; public&nbsp;class&nbsp;FtpUtil { &nbsp; public&nbsp;static&nbsp;String upload(String hostname,String username,String password, String basePath,String targetPath, String suffix,InputStream inputStream) throws&nbsp;SocketException, IOException { //实例化ftpClient FTPClient ftpClient&nbsp;= new&nbsp;FTPClient(); //1.连接服务器 ftpClient.connect(hostname); //2.登录（指定用户名和密码） ftpClient.login(username,password); //基本路径，一定存在 2017/03/22 String[] pathArray&nbsp;= targetPath.split("/"); for(String path:pathArray){ basePath+="/"+path; //3.指定目录 返回布尔类型 true表示该目录存在 boolean&nbsp;dirExsists&nbsp;= ftpClient.changeWorkingDirectory(basePath); //4.如果指定的目录不存在，则创建目录 if(!dirExsists){ //此方式，每次，只能创建一级目录 ftpClient.makeDirectory(basePath); } } //重新指定上传文件的路径 ftpClient.changeWorkingDirectory(basePath); //5.设置上传文件的方式 ftpClient.setFileType(FTP.BINARY_FILE_TYPE); //使用uuid，保存文件名唯一性 String uuid=UUID.randomUUID().toString(); /** &nbsp;* 6.执行上传 &nbsp;* remote 上传服务后，文件的名称 &nbsp;* local 文件输入流 &nbsp;* 上传文件时，如果已经存在同名文件，会被覆盖 &nbsp;*/ ftpClient.storeFile(uuid+suffix,inputStream); //7.关闭资源 ftpClient.logout(); ftpClient.disconnect(); &nbsp; StringBuilder builder&nbsp;= new&nbsp;StringBuilder(); builder.append("http://"); builder.append(hostname+"/"); builder.append(targetPath+"/"); builder.append(uuid+suffix); return&nbsp;builder.toString(); } &nbsp; /** &nbsp;* 根据文件名，获取文件后缀 &nbsp;* @param&nbsp;args &nbsp;* @throws&nbsp;SocketException &nbsp;* @throws&nbsp;IOException &nbsp;*/ public&nbsp;static&nbsp;String getSuffix(String filename){ String suffix&nbsp;= ""; int&nbsp;fnum&nbsp;= filename.lastIndexOf("."); if(fnum&gt;0){ suffix&nbsp;= filename.substring(fnum); } return&nbsp;suffix; } &nbsp; &nbsp; public&nbsp;static&nbsp;void&nbsp;main(String[] args) throws&nbsp;SocketException, IOException { InputStream inputStream&nbsp;= new&nbsp;FileInputStream("E:/2017-03-22_105509.png"); String remoteFilename&nbsp;= upload("192.168.88.10", "ftpuser", "111111", "/home/ftpuser/www","/2017/03/22", ".png", inputStream); System.out.println(remoteFilename); } } &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  [ftp.properties][]

<table style="margin-left:18pt;width:396.8pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:396.8pt;"> #文件上传property ftp.hostname=192.168.88.10 ftp.username=ftpuser ftp.password=111111 ftp.basePath=/home/ftpuser/www &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

1.  FileUploadService

FileUploadServiceImpl.java

1.  controller

FileUploadController.java

1.  jsp页面

使用bootstrap fileinput插件

使用方法：

1.  添加fileinput.css fileinput.js

1.  初始化、回调函数

<table style="margin-left:36pt;width:378.8pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:378.8pt;"> &lt;script&gt; //初始设置 language指定语言 uploadUrl指定文件上传的后台地址 allowedPreviewTypes允许上传文件的类型 &nbsp;&nbsp;&nbsp;&nbsp;$('#file-product-category').fileinput({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;language: 'zh', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uploadUrl: '${ctx}/fileUpload/save', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;allowedPreviewTypes : ['image', 'html', 'text', 'video', 'audio', 'flash'] &nbsp;&nbsp;&nbsp;&nbsp;}); //上传文件失败后 调用的方法（回调函数） &nbsp;&nbsp;&nbsp;&nbsp;$('#file-product-category').on('fileuploaderror', function(event, data, previewId, index) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form = data.form, files = data.files, extra = data.extra, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response = data.response, reader = data.reader; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('File upload error'); &nbsp;&nbsp;&nbsp;&nbsp;}); //文件错误 比如文件类型错误 会调用此函数（回调函数） &nbsp;&nbsp;&nbsp;&nbsp;$('#file-product-category').on('fileerror', function(event, data) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data.id); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data.index); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data.file); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data.reader); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(data.files); &nbsp;&nbsp;&nbsp;&nbsp;}); //文件上传成功之后 回调的函数 &nbsp;&nbsp;&nbsp;&nbsp;$('#file-product-category').on('fileuploaded', function(event, data, previewId, index) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form = data.form, files = data.files, extra = data.extra, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;response = data.response, reader = data.reader; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(data.response.fileUrl); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#image").val(data.response.fileUrl); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('File uploaded triggered'); &nbsp;&nbsp;&nbsp;&nbsp;}); &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

1.  debug无法关联原码

![20190515162344249.png][]

解决方法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0OTAzOTMx_size_16_color_FFFFFF_t_70][]

关联源码后，需要重新启动项目。

[20190515162405145.png]: /images/20220131/cedd0f2aad3d4a39bc6969e0ad8fd80f.png
[ftp.properties]: ftp://ftp.properties
[20190515162344249.png]: /images/20220131/994cf431139d4ad19465221ab63fbf3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0OTAzOTMx_size_16_color_FFFFFF_t_70]: /images/20220131/69cd97c071d34cb783c3bd6c389f011d.png