頁面上傳圖片到伺服器
A. uniapp上傳圖片至伺服器，獲得在線圖片鏈接預覽（實戰）
功能需求：
前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。
思路如下：
前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到後端伺服器，後端對二進制圖片進行處理，返回給前端一個伺服器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然後前端將這個圖片鏈接渲染在頁面進行預覽。
首先
我們看一下uniapp的官方文檔：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是這樣的
先寫一個模擬的demo
1：首先我是是用了colorUI的框架，在項目裡面引入
在page底下的vue文件引入
這樣一來，就不需要寫什麼樣式了，直接使用寫好的就行了。
效果是這樣的
每次選完圖片之後顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用後端小夥伴給的介面，將自己本地的二進制文件傳給他了。
在 chooseImage 選擇好圖片之後，寫一個成功的回調函數，在回到函數裡面添加一個圖片上傳的方法uploadFile，在方法裡面添加url，等參數。
若是請求成功
則返回一個圖片鏈接
添加介面之後 的，demo如下：
B. 圖片伺服器的搭建01
nginx+vsftp搭建圖片伺服器
前言:
在分布式架構中，往往會有多個tomcat，然後你上傳的圖片只是在其中的某一個tomcat，你訪問時是由集群的tomcat隨機提供服務。當你訪問的tomcat是有圖片的那個時，圖片能正常顯示，如果恰巧是那個沒有圖片的tomcat時，圖片就不能正常顯示。這就完成了訪問同一個圖片，可能你刷新一次可以訪問，再刷新一次圖片就訪問不到了。這時，我們就需要一個伺服器用來專門存儲圖片，一般我們都用nginx。
1、nginx+vsftp:
上面分別介紹了nginx和vsftp，那麼這兩個東西怎麼組合起來用呢？怎麼實現這個圖片伺服器呢？我們知道，tomcat安裝好啟動後，在瀏覽器輸入localhost:8080，就會出現tomcat的歡迎頁，nginx也一樣。比如linux的ip是192.168.50.122，那麼啟動nginx後，在瀏覽器訪問這個地址也會出現nginx的歡迎頁，其實是因為它有個默認的訪問頁面，完整的地址應該是192.168.50.122/index.html，那麼我們就可以根據這個，把它默認的訪問頁面改成我們上傳的圖片的保存路徑，比如上傳了一張pic.jpg圖片到linux的/home/ftpuser/images中，如果我們把默認訪問頁面改成/home/ftpuser，那麼在瀏覽器中輸入192.168.50.122/images/pic.jpg，就可以訪問到這張圖片了。下面就來介紹nginx、vsftp的安裝以及配置。
<meta charset="utf-8">
1、安裝:
2、添加ftp用戶:
3、給ftp用戶添加密碼:
輸入兩次密碼後修改密碼。
4、修改selinux:
①查看狀態:
執行這個命令可以看到
這兩個都off，執行如下命令設置為on:
再次執行 getsebool -a | grep ftp 看到那兩個狀態是on就行了。
5、關閉匿名訪問:
執行
命令:
還要在vsftp.conf文件最下面添加以下內容:
然後保存退出即可。
6、設置開機啟動:
7、測試:
打開filezilla工具，輸入虛擬機的ip，21埠，用戶名和密碼，點擊快速連接，連接vsftp服務:
如圖所示則連接成功。
<meta charset="utf-8">
按照以上步驟安裝好nginx和vsftp後，還是不能訪問上傳的圖片的，需要進行如下配置:
執行
命令，打開nginx的配置文件:
按道理這樣就可以了，但是我訪問卻報錯:
403 forbidden ，最後發現是因為ftpuser文件夾沒有可讀許可權，執行如下命令:
再次訪問即可成功！
至此圖片伺服器搭建完成！至於在java中如何使用這個圖片伺服器，請參考 Java實現把圖片上傳到圖片伺服器 。
在搭建的過程中，遇到很多坑，因為我參考的教程是centos 6，防火牆是iptables，而centos 7是firewall，
C. 小程序canvasToTempFilePath生成圖片後，怎麼上傳到自己的伺服器，不知道什麼原因請求發送不出去
1、首先在電腦中打開文件上傳工具，然後在軟體頁面中，點擊菜單欄 【新建】圖標。
D. 請問jsp頁面如何上傳照片到伺服器呢，
這個是我以前用的一個用jsp上傳的，servlet是一樣的，你可以自己修改下。
普通參數也是可以接受的
在jsp頁面中你需要導入jsmart的中文jar包，如果你需要的話可以密我，我郵箱發給你
上傳頁面upload.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form action="uploadfile.jsp" method="post" enctype="multipart/form-data">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0" style="font-size:12px;">
<tr>
<td height="40" align="right">節目名稱：</td>
<td><input type="text" style="WIDTH: 210px" id="mcdb_content" name="mcdb_content" /></td>
</tr>
<td height="40" align="right">節目鏈接地址：</td>
<td><input type="text" style="WIDTH: 210px" id="linkUrl" name="linkUrl" /></td>
</tr>
<tr>
<td height="40" align="right" valign="middle">
上傳焦點圖片：</td>
<td><input type="file" name="upfile" id="file"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
處理上傳文件的頁面uploadfile.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="com.jspsmart.upload.*;" %>
<%
SmartUpload mySmartUpload =new SmartUpload();
//上傳文件的限制大小
long file_size_max=4000000;
String fileName2="",ext="",testvar="";
//應保證在根目錄中有此目錄的存在（也就是說需要自己建立相應的文件夾）
String url="/upload/";
//初始化
mySmartUpload.initialize(pageContext);
//只允許上載此類文件
try {
mySmartUpload.setAllowedFilesList("bmp,jpg,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw");//此處的文件格式可以根據需要自己修改
//上載文件
mySmartUpload.upload();
} catch (Exception e){
//上傳類型出現異常
%>
<SCRIPT language=javascript>
alert("只允許上傳圖片");
window.location='upload.html';
</script>
<%
}
try{
//得到上傳的文件
com.jspsmart.upload.File myFile = mySmartUpload.getFiles().getFile(0);
//如果文件獲得為空
if (myFile.isMissing()){%>
<SCRIPT language=javascript>
alert("請先選擇要上傳的文件");
window.location='upload.html';
</script>
<%}
//得到了上傳的文件
else{
//String myFileName=myFile.getFileName(); //取得上載的文件的文件名
ext= myFile.getFileExt(); //取得後綴名
int file_size=myFile.getSize(); //取得文件的大小
String saveurl="";
//如果文件沒有超過限制上傳的大小
if(file_size<file_size_max){
//更改文件名，取得當前上傳時間的毫秒數值
Calendar calendar = Calendar.getInstance();
String filename = String.valueOf(calendar.getTimeInMillis());
saveurl=application.getRealPath("/")+url;
String filenamea="";
//保存路徑
saveurl+=filename+"."+ext;
filenamea+=filename+"."+ext;
//接受普通參數
Request req = mySmartUpload.getRequest();
String bt=(String)req.getParameter("mcdb_content");
String linkurl = (String)req.getParameter("linkUrl");
myFile.saveAs(saveurl,SmartUpload.SAVE_PHYSICAL);
out.print(filenamea);
}
}
}catch (Exception e){
out.print(e.toString());
}
%>
E. 我要在一個網頁上傳一張圖片到伺服器，然後保存圖片的地址，在另一個頁面顯示圖片
public class UploadAction extends ActionSupport {
//接收文件 名稱需要和表單name名稱一致
private File image;
//上傳多個圖片文件
private File[] images;
//上傳文件類型[image]為表單name名稱,ContentType為固定寫法
private String imageContentType;
private String[] imagesContentType;
//上傳文件名稱[image]為表單name名稱,FileName為固定寫法
private String imageFileName;
private String[] imagesFileName;
//上傳一個文件
public String upload(){
//將長傳的文件存儲到images文件夾下,首先根據images名稱得到具體路徑
String realPath = ServletActionContext.getServletContext().getRealPath("images");
File file = new File(new File(realPath),imageFileName);
//如果輸入為空 沒選擇圖片的話
if(image != null){
//判斷文件夾存不存在
if(!file.getParentFile().exists()){
file.getParentFile().mkdir(); //創建一個文件夾
}
try {
FileUtils.File(image, file);
super.addActionError("上傳成功");
} catch (IOException e) {
super.addActionError("上傳失敗");
e.printStackTrace();
}
}
return SUCCESS;
}
//上傳多個文件
public String manyUpload(){
//將長傳的文件存儲到images文件夾下,首先根據images名稱得到具體路徑
String realPath = ServletActionContext.getServletContext().getRealPath("images");
System.out.println(realPath);
File file =null;
if(images != null){
try {
for (int i = 0; i <images.length ; i++) {
file = new File(new File(realPath),imagesFileName[i]);
FileUtils.File(images[i], file);
}
super.addActionError("上傳成功");
} catch (IOException e) {
super.addActionError("上傳失敗");
e.printStackTrace();
}
}
return SUCCESS;
}
public File getImage() {
return image;
}
public void setImage(File image) {
this.image = image;
}
public String getImageContentType() {
return imageContentType;
}
public void setImageContentType(String imageContentType) {
this.imageContentType = imageContentType;
}
public String getImageFileName() {
return imageFileName;
}
public void setImageFileName(String imageFileName) {
this.imageFileName = imageFileName;
}
public File[] getImages() {
return images;
}
public void setImages(File[] images) {
this.images = images;
}
public String[] getImagesContentType() {
return imagesContentType;
}
public void setImagesContentType(String[] imagesContentType) {
this.imagesContentType = imagesContentType;
}
public String[] getImagesFileName() {
return imagesFileName;
}
public void setImagesFileName(String[] imagesFileName) {
this.imagesFileName = imagesFileName;
}
}
F. jquery如何將頁面生成的圖片上傳到伺服器
File Upload組件啊，是同步還是非同步呢
html部分：
<input type="file" name="file" class="webuploader-element-invisible" multiple="multiple" accept="image/*">
文件引入：
<link rel="stylesheet" type="text/css" href="diyUpload/css/diyUpload.css"><script type="text/javascript" src="diyUpload/js/diyUpload.js"></script>
HTML部分：
<div id="demo"> <div id="as" ></div></div>
JS部分：
<script type="text/javascript">
/** 伺服器地址,成功返回,失敗返回參數格式依照jquery.ajax習慣;* 其他參數同WebUploader*/
$('#as').diyUpload({
url:'server/fileupload.php',
success:function( data ) {
console.info( data ); },
error:function( err ) {
console.info( err );
},
buttonText : '選擇文件', chunked:true, // 分片大小
chunkSize:512 * 1024, //最大上傳的文件數量, 總文件大小,單個文件大小(單位位元組);
fileNumLimit:50,
fileSizeLimit:500000 * 1024,
fileSingleSizeLimit:50000 * 1024,
accept: {}});
</script>