preface

From the front end to the back end to the server, need to use SpringBoot+Vue+NginxVsftpd, need to have a Linux server, can be a virtual machine, but it takes too much time and energy to build a virtual machine Linux system, So I recommend the use of cloud servers, such as Ali cloud server, Tencent cloud services, one is only dozens of yuan, to buy a training server, I bought a year before 50 yuan, a month is only a few yuan, did not use Ali cloud can apply for free trial, is also quite fragrant.

Ali Cloud link: Ali Cloud

Install Nginx on the server

sudo yum install yum-utils 

Copy the following code into the file
vim /etc/yum.repos.d/nginx.repo

[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

# Pay attention to paste all, do not paste wrong

# installation
sudo yum install -y nginx
Copy the code

Successful installation

Execute the code after the installation is complete

whereis nginx
Copy the code

The followingNginx /usr/share/nginx /usr/share/nginx

cd /user/sbin
# start nginx
./nginx
Copy the code

To check whether the installation is successful, enter your IP address in the browser without adding a port number. If welcome to Nginx is displayed, the installation is successful

Modifying a Configuration File

Since the default proxy is /usr/share/nginx/html, we can only access the files here, so let’s modify the configuration file so that we can implement image server and remote connection to view images

cd /etc/nginx
Modify the configuration file
vim nginx.conf
Copy the code

You may have different configuration files, there may be many proxy configuration files in HTTP, we can modify its server, if not, add the following server in HTTP, this file is the root directory we need to create pictures uploaded by Linux users later, you can create it in advance

server {
        listen       8090; server_name localhost; location / { root /var/ftp/test; autoindex on; }}Copy the code

Restart Nginx using the command that started Nginx earlier

test

We put an image in the /var/ftp/test directory and use the browser to access it

Ok success!!

Install VSftpd

yum install -y vsftpd
Copy the code

If complete is displayed, the installation is successful

# Set boot to boot
systemctl enable vsftpd.service
# start
systemctl start vsftpd.service
# Check status
netstat -antup | grep ftp
Copy the code

Start-up successAccess VSFTPD as a local user

Add a user
adduser ftpuser
# set password
passwd ftpuser
Create a file directory for the FTP service
mkdir /var/ftp/test
Put a file or image in the directory
touch /var/ftp/test/testfile.txt
Change the owner of the /var/ftp/test directory to ftpuser
chown -R ftpuser:root /var/ftp/test
# change the vsftpd.conf configuration file
vim /etc/vsftpd/vsftpd.conf
Copy the code

You can refer to the official configuration parameters of Ali Cloud

Use the default values for all parameters except those mentioned below.

Change the value of the following parameters:
Disable anonymous login to the FTP server.
anonymous_enable=NO
# Allow local users to log in to the FTP server.
local_enable=YES
# Listen on IPv4 Sockets.
listen=YES

Add # comment out the following parameters at the beginning of the line:
# Stop listening on IPv6 Sockets.
#listen_ipv6=YES

Add the following parameters to the end of the configuration file:
# Set the directory where the local user logs in.
local_root=/var/ftp/test
All users are restricted to the home directory.
chroot_local_user=YES
# Enable the exception user list.
chroot_list_enable=YES
# specify an exception user list file. Users in the list are not locked in the home directory.
chroot_list_file=/etc/vsftpd/chroot_list
Enable passive mode.
pasv_enable=YES
allow_writeable_chroot=YES
This tutorial is the public IP address of the Linux instance.Pasv_address =< PUBLIC IP address of the FTP server >Set the minimum port range available for data transfer in passive mode.
It is recommended that you set the port range to a relatively high range, such as 50000~50010, to improve the security of accessing FTP server.
pasv_min_port=<port number>
Set the maximum port range available for data transmission in passive mode.
pasv_max_port=<port number>
Copy the code

But this configuration is not perfect, please refer to my configuration

local_root=/var/ftp/test
pasv_enable=YES
pasv_address=39.101.178.126
allow_writeable_chroot=YES
pasv_min_port=40000
pasv_max_port=40100
reverse_lookup_enable=NO
userlist_file=/etc/vsftpd/user_list
pam_service_name=vsftpd
Copy the code

Reverse_lookup_enable =NO Otherwise, the connection will be slow

# common chroot_list file
vim /etc/vsftpd/chroot_list
Copy the code

Notice If there are no exceptional users, you must also create a chroot_list file whose content can be empty.

Then ali cloud open security group open 20/21, and 40,000/40100 port, I set this port, according to their own Settings open port will not open port can go to see ali cloud official tutorial

Now that we’re all set up, let’s test the connection

1. Test in CMD

FTP plus IP address

Enter the created user name ftpuser and the password. The password will not be displayed

The code 230 appears to indicate a successful build

2. Run the XFTP test

Create a session Connect the host enter the IP address protocol select FTP port 21

== The connection succeeds ==

By the way, you can test the upload and download in XFTP, it is normal

Iii. Upload and build Vue

In order to make it convenient for me to use the Upload component of Elment for uploading, I will not demonstrate the front end construction, or we can also test without the front end code construction. I will explain the method later, and directly test the back end upload

<el-upload
      action="The backend interface address, for example, http://localhost:8080/uploadImage"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="uploadimg"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
Copy the code

So we don’t have to encapsulate the uploaded files or anything, so it’s convenient, right

Four, SpringBoot background construction

1. First introduce Maven

<dependency>
    <groupId>commons-net</groupId>
    <artifactId>commons-net</artifactId>
    <version>3.6</version>
</dependency>
<dependency>
	<groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.5</version>
</dependency>

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
Copy the code

2. Write a file upload interface

Yaml configuration file

spring:
  servlet:
    multipart:
      max-request-size: 10MB
      enabled: true
      max-file-size: 5MB
Copy the code

/ * * *@author XuJiaLin
 * @date* File upload interface */
@RestController
public class ImageUploadController {

    @PostMapping("/uploadImage")
    public String uploadImage(MultipartFile file){
        boolean result=false;
        // Get the link object
        FTPClient ftpClient = new FTPClient();
        int reply;
        try {
            // Connect to the FTP server
            ftpClient.connect("IP address".21);
            / / login FTP
            ftpClient.login("ftpuser"."Password");
            // Returns the status code of the login
            reply = ftpClient.getReplyCode();
            // Check whether the status code is normal. If the connection fails, the connection is disconnected
            if(! FTPReply.isPositiveCompletion(reply)){ ftpClient.disconnect();return "error";
            }
            // Get the byte stream
            InputStream inputStream = file.getInputStream();
            // Generate the file name
            String filename=UUidUtils.generateuuid()+ file.getOriginalFilename();
            // Set passive mode
            ftpClient.enterLocalPassiveMode();
            // Set to binary
            ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);
            // Upload the file
            result= ftpClient.storeFile(filename, inputStream);
            if(! result){ System.out.println("Failure");
            }
            // Close the byte stream
            inputStream.close();
            // Log out
            ftpClient.logout();
            System.out.println("Success");
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (ftpClient.isConnected()) {
                try {
                    ftpClient.disconnect();
                } catch(IOException e) { e.printStackTrace(); }}}return "success"; }}Copy the code

A utility class that generates Uuid

/ * * *@author XuJiaLin
 * @date2021/8/7 all * /
public class UUidUtils {
    public static String generateuuid(a){
        return UUID.randomUUID().toString().replace("-"."").substring(0.15); }}Copy the code

The return value of the file upload interface can be changed to the generated file name and add the IP address to return the connection of the image, I did not change here

Five, test

Pick a picture

The Springboot is printed successfully

Take another look at the server

We’re trying remote access

Ok, now we can access the image remotely using the IP address and file name

conclusion

Problems you might encounter

If you create a user on Linux and still cannot log in, you can use the command to switch the user back to root, or restart the server

# Switch user
su username
Copy the code

Be sure to open it in the Vsftpd configuration file

reverse_lookup_enable=NO

It’s not easy to create. Give it a thumbs up and follow