jquery 上传ftp服务器文件,spring boot使用ftp服务器实现图片上传

一、前端代码

1、html  [ 此处省略其他input标签 ]

提交

2、javascript

/图片上传预览 IE是用了滤镜。

function previewImage(file) {

var MAXWIDTH = 90;

var MAXHEIGHT = 90;

var div = document.getElementById('preview');

div.innerHTML = '';

var img = document.getElementById('imghead');

img.onload = function() {

var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

img.width = rect.width;

img.height = rect.height;

// img.style.marginLeft = rect.left+'px';

img.style.marginTop = rect.top + 'px';

}

var reader = new FileReader();

reader.onload = function(evt) {

img.src = evt.target.result;

}

reader.readAsDataURL(file.files[0]);

}

//图片上传

function clacImgZoomParam(maxWidth, maxHeight, width, height) {

var param = {

top: 0,

left: 0,

width: width,

height: height

};

if(width > maxWidth || height > maxHeight) {

rateWidth = width / maxWidth;

rateHeight = height / maxHeight;

if(rateWidth > rateHeight) {

param.width = maxWidth;

param.height = Math.round(height / rateWidth);

} else {

param.width = Math.round(width / rateHeight);

param.height = maxHeight;

}

}

param.left = Math.round((maxWidth - param.width) / 2);

param.top = Math.round((maxHeight - param.height) / 2);

return param;

}

二、SpringBoot后台

1、Controller

处理表单提交的内容，既可新增，又可修改。当图片文件未更新是，不用上传

@PostMapping("/save")

public ModelAndView save(@Valid ProductForm productForm, //获取其他input标签内容，自动封装

BindingResult bindingResult, //验证参数是否合法

Map map, //ModelAndview返回绑定内容

@RequestParam(value = "uploadFile" , required = false) MultipartFile uploadFile){

if (bindingResult.hasErrors()){

map.put("msg",bindingResult.getFieldError().getDefaultMessage());

map.put("url","/sell/seller/product/list");

return new ModelAndView("common/error",map);

}

ProductInfo productInfo = new ProductInfo();

try {

if(!StringUtils.isEmpty(productForm.getProductId())){

productInfo = productService.findOne(productForm.getProductId());

}else { //如果productId为空，表示是新增

productForm.setProductId(KeyUtil.getUniqueKey());

}

//判断是否需要更新图片

if (uploadFile.isEmpty()){//表示文件没有更新，不用上传

log.info("[不需要更新图片]");

//如果productId不为空，表示记录已经存在

}else {

log.info("[要更新图片]");

Map uploadPictureMap = pictureService.uploadPicture(uploadFile);

productForm.setProductIcon(uploadPictureMap.get("url").toString());

}

BeanUtils.copyProperties(productForm,productInfo);

productService.save(productInfo);

}catch (SellException e){

map.put("msg",e.getMessage());

map.put("url","/sell/seller/product/list");

return new ModelAndView("common/error",map);

}

map.put("url","/sell/seller/product/list");

return new ModelAndView("common/success", map);

}

2、Service层的uploadPicture方法

上传文件到ftp服务器，相关配置来自配置文件

@Service

public class PictureServiceImpl implements PictureService {

@Autowired

private ImageServerConfig imageServerConfig;

@Override

public Map uploadPicture(MultipartFile uploadFile) {

Map resultMap = new HashMap<>();

try {

//生成一个新的文件名

//取原始文件名

String oldName = uploadFile.getOriginalFilename();

//生成新文件名

//UUID.randomUUID();

String newName = KeyUtil.getUniqueKey();

newName = newName + oldName.substring(oldName.lastIndexOf("."));

//图片上传

String imagePath = new DateTime().toString("/yyyy/MM/dd");

boolean result = FtpUtil.uploadFile(imageServerConfig.getAddress(), imageServerConfig.getPort(), imageServerConfig.getUsername(), imageServerConfig.getPassword(),

imageServerConfig.getBastPath(), imagePath, newName, uploadFile.getInputStream());

//返回结果

if(!result) {

resultMap.put("error", 1);

resultMap.put("message", "文件上传失败");

return resultMap;

}

resultMap.put("error", 0);

//上传成功后图片的存储路径

resultMap.put("url", imageServerConfig.getImageBaseUrl() + imagePath + "/" + newName);

return resultMap;

} catch (Exception e) {

resultMap.put("error", 1);

resultMap.put("message", "文件上传发生异常");

return resultMap;

}

}

}

3、ImageServerConfig及相关配置

ImageServerConfig类读取配置文件中的ftp服务器配置：

@Data

@Component

@ConfigurationProperties(prefix = "ftp")

public class ImageServerConfig {

private String address;

private Integer port;

private String username;

private String password;

private String bastPath;

private String imageBaseUrl;

}

application.yml配置文件：

ftp:

address: 192.168.116.137

port: 21

username: ftpuser

password: ftpuser

bastPath: /home/ftpuser/www/images

imageBaseUrl: http://192.168.116.137/images

以上就是SpringBoot图片上传的步骤，欢迎指教！！