summernote 上传图片到图片服务器的解决方案(springboot 成功)

遇到的可以连接成功但是拒绝登录的问题

前提说一下,我自己在自己的服务器上配置了nginx的反向代理,所以请求的时候才会直接写的是我的ip地址,要配置nginx的话,可以看我的nginx的笔记

当代码感觉没有问题的时候,但还是无法上传,首先问自己是不是被拒绝登陆了(还真是)

这个问题是当你使用特定的用户的时候才会被拒绝请求

可以在ftpusers & user_list 中把你用到的用户给注释掉(不建议这么干,不能保证安全性)

1.首先检查系统是否开启了vsftp服务,如果没有开启,先开启该服务。

2.查看配置

vsftpd的配置,配置文件中限定了vsftpd用户连接控制配置。
vsftpd.ftpusers:位于/etc/vsftpd目录下。它指定了哪些用户账户不能访问FTP服务器,例如root等。
vsftpd.user_list:位于/etc/vsftpd目录下。该文件里的用户账户在默认情况下也不能访问FTP服务器,仅当vsftpd .conf配置文件里启用userlist_enable=NO选项时才允许访问。
vsftpd.conf:位于/etc/vsftpd目录下。来自定义用户登录控制、用户权限控制、超时设置、服务器功能选项、服务器性能选项、服务器响应消息等FTP服务器的配置。

3.配置修改完成后,执行service vsftpd restart重启vsftpd服务。

下面是正式的代码

前台代码

用到的富文本编辑器是summernote前端代码如下

用到的云服务器是阿里云的Centos 7

window.onload = function () {
        var summernote = $('.summernote').summernote({
            lang: 'zh-CN',
            height: 300,
            minHeight: 300,
            placeholder: '请输入通知的内容',
            callbacks: { // 回调函数
                // 上传图片时使用的回调函数
                onImageUpload: function (files, editor, $editable) {
                    console.log(files)
                    sendFile(files[0], editor, $editable);
                }
            },
          
        });
        
        function sendFile(files, editor, welEditable) {
            data = new FormData();
            data.append("file", files);
            $.ajax({
                data: data,
                type: "POST",
                url: '/image/notice_add',
                //请求路径
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    alert(data.message)
                    // data.message
                    let url = 'http://xxx.xxx.xxx.xxx/';
                    //上面是服务器的地址
                    $('.summernote').summernote('insertImage',url+data.message);  
                    //xxx的地方是图片url的前缀 key为上传后图片的名字
                },error:
                    function (url) {
                        alert(JSON.stringify(url.message))
                    }
            });
        }

后台代码(springboot)

首先是用到的工具类FtpFileUtil

public class FtpFileUtil {

    //ftp服务器ip地址
    private static final String FTP_ADDRESS = "39.96.11.225";
    //端口号
    private static final int FTP_PORT = 21;
    //用户名 这里用到的是root 可以切合上面遇到的问题,实际开发中需要单独创建一个用户
    private static final String FTP_USERNAME = "root";
    //密码
    private static final String FTP_PASSWORD = "XXXXXXXXXX";
    //图片路径
    private static final String FTP_BASEPATH = "/soft/code/images";

    public  static boolean uploadFile(String originFileName, InputStream input){
        boolean success = false;
        FTPClient ftp = new FTPClient();
        ftp.setControlEncoding("GBK");
        try {
            int reply;
            ftp.connect(FTP_ADDRESS, FTP_PORT);// 连接FTP服务器

            ftp.login(FTP_USERNAME, FTP_PASSWORD);// 登录

            reply = ftp.getReplyCode();
            if (!FTPReply.isPositiveCompletion(reply)) {
                ftp.disconnect();

                return success;
            }
            ftp.setFileType(FTPClient.BINARY_FILE_TYPE);
            ftp.makeDirectory(FTP_BASEPATH );
            ftp.changeWorkingDirectory(FTP_BASEPATH );
            ftp.storeFile(originFileName,input);

            input.close();
            ftp.logout();
            success = true;
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftp.isConnected()) {
                try {
                    ftp.disconnect();
                } catch (IOException ioe) {
                }
            }
        }
        return success;
    }
}

上传比较大的图片的时候需要在springboot下配置ImageResolverConfig

@Configuration
public class ImageResolverConfig {
    @Bean
    public MultipartResolver multipartResolver() {
        CommonsMultipartResolver resolver=new CommonsMultipartResolver();
//        resolver.setDefaultEncoding("utf-8");
        resolver.setMaxInMemorySize(1048576);
        resolver.setMaxUploadSize(20971520);
        return resolver;
    }
}
@RestController
@RequestMapping("/image/")
public class ImageUploadController {

    @ResponseBody
    @RequestMapping(value = "notice_add", headers = ("content-type=multipart/*"), method = RequestMethod.POST)
    public ResponseResult MyselfImageUpload(@RequestParam("file") CommonsMultipartFile file, HttpServletRequest request){
        try {
            String path = ImageUploadPathConstant.UPLOAD_PATH;
            String fileName = UUID.randomUUID().toString().replace("-", "") + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            // File destFile = new File(path + "/" + fileName);
            // FileUtils.copyInputStreamToFile(file.getInputStream(), destFile);
            //上面代码是拷贝到本地的,但是因为感觉并不人性化,所以采取了上传到图片服务器的思路
            InputStream inputStream=file.getInputStream();

            // String url = destFile.getAbsolutePath();

            String url = null;
            Boolean flag= FtpFileUtil.uploadFile(fileName,inputStream);
            if(flag){
                url = fileName;
            }
		//ResponseResult 是一个进行结果封装的类
           
            return  ResponseResult.success(url);
        }catch (Exception e){
            return  null;
        }

    }

}

ResponseResult //这个类可以不进行使用,但是为了系统的其他功能的使用,尽量加上。用于结果的封装

public class ResponseResult {

    //状态码
    private int status;

    //消息
    private String message;

    //返回数据
    private Object data;

    public ResponseResult(int status, String message, Object data) {
        this.status = status;
        this.message = message;
        this.data = data;
    }

    //成功
    public static ResponseResult success(Object data) {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_SUCCESS, "success", data);
    }

    public static ResponseResult success(String message) {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_SUCCESS, message, null);
    }

    public static ResponseResult success() {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_SUCCESS, "success", null);
    }

    //失败
    public static ResponseResult fail() {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_FAIL, "fail", null);
    }

    public static ResponseResult fail(Object data) {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_FAIL, "fail", data);
    }

    public static ResponseResult fail(String message) {
        return new ResponseResult(ResponseStatusConstant.RESPONSE_STATUS_FAIL, message, null);
    }

    public int getStatus() {
        return status;
    }

    public void setStatus(int status) {
        this.status = status;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

}
posted @ 2019-07-30 10:28  atomFix  阅读(1750)  评论(0编辑  收藏  举报