页面上传图片到服务器
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>