summernote's solution for uploading pictures to the image server (springboot was successful)

Problems encountered with successful connection but denial of login

Premise to say, I configure the reverse proxy of nginx on my own server, so I will write my ip address directly when requesting. To configure nginx, you can see my notes of nginx.

When the code feels okay, but it still can't be uploaded, first ask yourself if you have been refused to log in (really)

The problem is that requests are rejected when you use a particular user.

You can annotate the users you use in ftpusers & user_list (it's not recommended to do this, it's not guaranteed to be secure)

1. First check whether the system has opened the vsftp service. If not, open the service first.

2. View configuration

The configuration file of vsftpd defines the configuration of vsftpd user connection control.
vsftpd.ftpusers: located in / etc/vsftpd directory. It specifies which user accounts cannot access FTP servers, such as root.
vsftpd.user_list: located in / etc/vsftpd directory. The user account in this file can't access the FTP server by default, only if the userlist_enable=NO option is enabled in the vsftpd.conf configuration file.
vsftpd.conf: In the / etc/vsftpd directory. Configuration of FTP servers from customized user login control, user rights control, timeout settings, server function options, server performance options, server response messages, etc.

3. After the configuration modification is completed, the service vsftpd restart is executed to restart the vsftpd service.

Here's the formal code

Front-end code

The rich text editor used is the summernote front-end code as follows

The cloud server used is Centos 7 of Aliyun.

window.onload = function () {
        var summernote = $('.summernote').summernote({
            lang: 'zh-CN',
            height: 300,
            minHeight: 300,
            placeholder: 'Please enter the contents of the notification.',
            callbacks: { // callback
                // Callback function for uploading pictures
                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',
                //Request path
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function (data) {
                    alert(data.message)
                    // data.message
                    let url = 'http://xxx.xxx.xxx.xxx/';
                    //It's the address of the server.
                    $('.summernote').summernote('insertImage',url+data.message);  
                    //Where xxx is located is that the prefix key of the image url is the name of the uploaded image.
                },error:
                    function (url) {
                        alert(JSON.stringify(url.message))
                    }
            });
        }

Background code (springboot)

First, the tool class FtpFileUtil is used

public class FtpFileUtil {

    //ftp server ip address
    private static final String FTP_ADDRESS = "39.96.11.225";
    //Port number
    private static final int FTP_PORT = 21;
    //User names here use root to fit the problems encountered above. In actual development, it is necessary to create a single user.
    private static final String FTP_USERNAME = "root";
    //Password
    private static final String FTP_PASSWORD = "XXXXXXXXXX";
    //Picture Path
    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);// Connect to FTP Server

            ftp.login(FTP_USERNAME, FTP_PASSWORD);// Sign in

            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;
    }
}

When uploading larger images, you need to configure Image Resolver Config under spring boot

@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);
            //The above code is copied to the local, but because the feeling is not human, so take the idea of uploading to the image server.
            InputStream inputStream=file.getInputStream();

            // String url = destFile.getAbsolutePath();

            String url = null;
            Boolean flag= FtpFileUtil.uploadFile(fileName,inputStream);
            if(flag){
                url = fileName;
            }
        //ResponseResult is a result encapsulation class
           
            return  ResponseResult.success(url);
        }catch (Exception e){
            return  null;
        }

    }

}

ResponseResult // This class can not be used, but for the use of other functions of the system, try to add. Packaging for results

public class ResponseResult {

    //Status code
    private int status;

    //news
    private String message;

    //Return data
    private Object data;

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

    //Success
    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);
    }

    //fail
    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;
    }

}

Keywords: PHP ftp vsftpd Nginx JSON

Added by RClapham on Tue, 30 Jul 2019 05:47:16 +0300