文章目錄
- 前言
- 一、在服務器上安裝Nginx
- 修改組態檔
- 測驗
- 二、安裝VSftpd
- 1.在cmd中測驗
- 2.在xftp中測驗
- 三 、Vue的上傳搭建
- 四 、SpringBoot后臺搭建
- 1. 首先引入maven
- 2. 撰寫檔案上傳介面
- 五、 進行測驗
- 總結
前言
今天寫一個搭建圖片上傳服務器的教程，順便把自己的經驗分享一下，從前端到后端到服務器的搭建，需要用到SpringBoot+Vue+NginxVsftpd，需要有一臺linux服務器，可以是虛擬機，但搭建虛擬機的linux系統太費時間和精力，所以推薦使用云服務器，比如阿里云服務器，騰訊云服務等，一臺也就幾十塊錢，搞活動買一臺練手的服務器，我之前買了一臺50塊錢左右一年，一個月也才幾塊錢，沒有用過阿里云的可以申請免費試用，也是挺香的，
阿里云鏈接： 阿里云
一、在服務器上安裝Nginx
sudo yum install yum-utils
#打開檔案把下面代碼復制到檔案中
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
#注意全部粘貼，不要粘貼錯了
#安裝
sudo yum install -y nginx
安裝成功
安裝完成之后執行代碼
whereis nginx
接下來
/etc/nginx下面是nginx的組態檔
/usr/share/nginx下面有個HTML檔案夾，是nginx默認代理的檔案夾
cd /user/sbin
#啟動nginx
./nginx
測驗是否安裝成功，在瀏覽器輸入自己的IP地址，不需要加埠號，如果顯示welcome to Nginx表示安裝成功
修改組態檔
因為默認代理的是/usr/share/nginx/html中的檔案，我們只能訪問到這里的檔案，為了我們能實作圖片服務器和遠程連接查看圖片我們修改一下組態檔
cd /etc/nginx
#修改組態檔
vim nginx.conf
可能你們的組態檔不一樣，可能在http里面有配置好多代理之前組態檔，我們可以修改他的server,沒有的話就在http里面添加如下的server,這個檔案是我們后面需要創建linux用戶上傳圖片的根目錄，可以提前創建好
server {
listen 8090;
server_name localhost;
location / {
root /var/ftp/test;
autoindex on;
}
}
重啟Nginx，使用之前啟動nginx的命令
測驗
我們在/var/ftp/test目錄下放入一張圖片，在使用瀏覽器進行訪問
ok 成功！！！
二、安裝VSftpd
yum install -y vsftpd
顯示complete表示安裝成功
#設定開機自啟
systemctl enable vsftpd.service
#啟動
systemctl start vsftpd.service
#檢查狀態
netstat -antup | grep ftp
啟動成功
使用本地用戶訪問vsftpd
#添加一個用戶
adduser ftpuser
#設定密碼
passwd ftpuser
#創建一個供FTP服務使用的檔案目錄
mkdir /var/ftp/test
#在目錄里面放個檔案或者圖片
touch /var/ftp/test/testfile.txt
#更改/var/ftp/test目錄的擁有者為ftpuser
chown -R ftpuser:root /var/ftp/test
#修改vsftpd.conf組態檔
vim /etc/vsftpd/vsftpd.conf
可以參考阿里云官方的配置引數
#除下面提及的引數，其他引數保持默認值即可，
#修改下列引數的值：
#禁止匿名登錄FTP服務器，
anonymous_enable=NO
#允許本地用戶登錄FTP服務器，
local_enable=YES
#監聽IPv4 sockets，
listen=YES
#在行首添加#注釋掉以下引數：
#關閉監聽IPv6 sockets，
#listen_ipv6=YES
#在組態檔的末尾添加下列引數：
#設定本地用戶登錄后所在目錄，
local_root=/var/ftp/test
#全部用戶被限制在主目錄，
chroot_local_user=YES
#啟用例外用戶名單，
chroot_list_enable=YES
#指定例外用戶串列檔案，串列中用戶不被鎖定在主目錄，
chroot_list_file=/etc/vsftpd/chroot_list
#開啟被動模式，
pasv_enable=YES
allow_writeable_chroot=YES
#本教程中為Linux實體的公網IP，
pasv_address=<FTP服務器公網IP地址>
#設定被動模式下，建立資料傳輸可使用的埠范圍的最小值，
#建議您把埠范圍設定在一段比較高的范圍內，例如50000~50010，有助于提高訪問FTP服務器的安全性，
pasv_min_port=<port number>
#設定被動模式下，建立資料傳輸可使用的埠范圍的最大值，
pasv_max_port=<port number>
但是這個配置不是很完美可以參考我的配置
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
其他都差不多
最最重要的東西，一定要設定，要不然會后悔的
reverse_lookup_enable=NO
要不然連接速度賊慢
#常見chroot_list檔案
vim /etc/vsftpd/chroot_list
注意 沒有例外用戶時，也必須創建 chroot_list檔案，內容可為空，
然后再阿里云中開啟安全組
開啟20/21，和40000/40100埠，我設定的是這個埠，根據自己的設定開放埠
不會開放埠的可以去看阿里云官方教程
這些都設定的差不多了，進行連接測驗
1.在cmd中測驗
ftp 加ip地址
輸入創建的用戶名ftpuser和密碼，密碼是不會顯示的
出現230 這個代碼表示搭建成功
2.在xftp中測驗
新建一個會話連接
主機填寫ip地址
協議選擇FTP
埠21
連接成功
順便可以在xftp中測驗一下上傳與下載，都是正常的
三 、Vue的上傳搭建
為了方便我這里使用elment的upload組件進行上傳，我就不演示搭建前端了，或者不搭建前端代碼也可以進行測驗，后面我會說方法，直接在后端測驗上傳
<el-upload
action="后端介面地址，例如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>
這里就不需要我們對上傳的檔案進行封裝什么的，就很方便
四 、SpringBoot后臺搭建
1. 首先引入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>
2. 撰寫檔案上傳介面
yaml組態檔
spring:
servlet:
multipart:
max-request-size: 10MB
enabled: true
max-file-size: 5MB
檔案上傳介面
/**
* @author XuJiaLin
* @date 2021/8/7 21:31
* 檔案上傳介面
*/
@RestController
public class ImageUploadController {
@PostMapping("/uploadImage")
public String uploadImage(MultipartFile file){
boolean result=false;
//獲取鏈接物件
FTPClient ftpClient = new FTPClient();
int reply;
try {
//連接ftp服務器
ftpClient.connect("ip地址",21);
//登錄ftp
ftpClient.login("ftpuser","密碼");
//回傳登錄的狀態碼
reply = ftpClient.getReplyCode();
//判斷狀態碼是否正常,連接失敗則斷開連接
if(!FTPReply.isPositiveCompletion(reply)){
ftpClient.disconnect();
return "error";
}
//獲取位元組流
InputStream inputStream = file.getInputStream();
//生成檔案名
String filename=UUidUtils.generateuuid()+ file.getOriginalFilename();
//設定被動模式
ftpClient.enterLocalPassiveMode();
//設定為二進制
ftpClient.setFileType(FTPClient.BINARY_FILE_TYPE);
//上傳檔案
result= ftpClient.storeFile(filename, inputStream);
if (!result){
System.out.println("失敗");
}
//關閉位元組流
inputStream.close();
//退出登錄
ftpClient.logout();
System.out.println("成功");
} catch (IOException e) {
e.printStackTrace();
} finally {
if (ftpClient.isConnected()) {
try {
ftpClient.disconnect();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return "success";
}
}
生成uuid的工具類
/**
* @author XuJiaLin
* @date 2021/8/7 21:41
*/
public class UUidUtils {
public static String generateuuid(){
return UUID.randomUUID().toString().replace("-","").substring(0,15);
}
}
檔案上傳介面的回傳值可以修改為生成的檔案名和加上ip地址，就能把圖片的連接進行回傳了，這里我沒有修改
五、 進行測驗
選著一張圖片
Springboot列印成功
再查看一下服務器
我們在試一下遠程連接訪問
ok大功告成，我們現在就可以使用ip地址加檔案名遠程訪問圖片了
總結
可能會遇到的問題
在linux上創建了用戶但始終登錄不起，可以使用切換用戶的命令,在切換回root用戶，或者重啟服務器試試
#切換用戶
su username
一定要在Vsftpd的組態檔中打開reverse_lookup_enable=NO
創作不易，點個贊和關注
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292821.html
標籤：其他