1.在HBuilder中修改pom.xml文件
4.0.0 org.springframework.boot spring-boot-starter-parent1.5.2.RELEASE org.personal.qin.demos upload_demo1.0.0-SNAPSHOT jar UTF-8 UTF-8 1.8 org.springframework.boot spring-boot-starter-weborg.springframework spring-webmvccommons-fileupload commons-fileupload1.3.1 com.sun.jersey jersey-client1.19 com.sun.jersey jersey-core1.19 ${project.artifactId} org.apache.maven.plugins maven-resources-pluginUTF-8 org.apache.maven.plugins maven-compiler-plugin1.8 1.8 UTF-8 org.springframework.boot spring-boot-maven-plugin
2.utiles下添加JesyFileUploadUtil文件
package com.rz.cms.server.main.utils;
import java.io.IOException;
import java.util.Date;
import java.util.Random;
import javax.net.ssl.SSLContext;
import org.springframework.web.multipart.MultipartFile;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;
import com.sun.jersey.api.client.config.ClientConfig;
import com.sun.jersey.api.client.config.DefaultClientConfig;
import com.sun.jersey.client.urlconnection.HTTPSProperties;
public class JesyFileUploadUtil {
public static FileInfo uploadFile(MultipartFile file, String serverUrl) throws IOException {
//把request请求转换成多媒体的请求对象
// MultipartHttpServletRequest mh = (MultipartHttpServletRequest) request;
//根据文件名获取文件对象
// MultipartFile cm = mh.getFile(fileName);
//获取文件的上传流
byte[] fbytes = file.getBytes();
//重新设置文件名
String newFileName = "";
newFileName += new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上
//随机生成一个3位的随机数
Random r = new Random();
for(int i=0; i<3; i++) {
newFileName += r.nextInt(10); //生成一个0-10之间的随机整数
}
//获取文件的扩展名
String orginalFilename = file.getOriginalFilename();
String suffix = orginalFilename.substring(orginalFilename.indexOf("."));
//创建jesy服务器，进行跨服务器上传
// Client client = Client.create(getClientConfig());
Client client = Client.create();
//把文件关联到远程服务器
//http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpg
WebResource resource = client.resource(serverUrl+"/upload/"+newFileName+suffix);
//上传
resource.put(String.class, fbytes);
//图片上传成功后要做的事儿
//1、ajax回调函数做图片回显（需要图片的完整路径）
//2、将图片的路径保存到数据库（需要图片的相对路径）
String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径
String relativePath = "/upload/"+newFileName+suffix; //相对路径
// //生成一个json响应给客户端
// String resultJson = "{"fullPath":""+fullPath+"", "relativePath":""+relativePath+""}";
// return resultJson;
return new FileInfo(newFileName+suffix, false, fullPath, relativePath);
}
// @SuppressWarnings("unused")
// private static ClientConfig getClientConfig() {
// SslConfigurator sslConfig = SslConfigurator.newInstance();
// sslConfig.trustStoreFile("src/main/resources/lvxingfw.jks")
// .trustStorePassword("lxfw2021");
// sslConfig.securityProtocol("SSL");
// SSLContext sslContext = sslConfig.createSSLContext();
//
// ClientConfig cc = new DefaultClientConfig();
// cc.getProperties().put(HTTPSProperties.PROPERTY_HTTPS_PROPERTIES,
// new HTTPSProperties(new MyHostnameVerifier(), sslContext));
//
// return cc;cc
// }
}
3. utiles下添加FileInfo文件
package com.rz.cms.server.main.utils;
public class FileInfo {
private String fileName;
private boolean isSecret;
private String absolutPath;
private String relativePath;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getAbsolutPath() {
return absolutPath;
}
public void setAbsolutPath(String absolutPath) {
this.absolutPath = absolutPath;
}
public String getRelativePath() {
return relativePath;
}
public void setRelativePath(String relativePath) {
this.relativePath = relativePath;
}
public boolean isSecret() {
return isSecret;
}
public void setSecret(boolean isSecret) {
this.isSecret = isSecret;
}
public FileInfo() {
}
public FileInfo(String fileName, boolean isSecret, String absolutPath, String relativePath) {
super();
this.fileName = fileName;
this.isSecret = isSecret;
this.absolutPath = absolutPath;
this.relativePath = relativePath;
}
@Override
public String toString() {
return "FileInfo [fileName=" + fileName + ", isSecret=" + isSecret + ", absolutPath=" + absolutPath
+ ", relativePath=" + relativePath + "]";
}
}
4.Controller下添加FileController跨越文件
package com.rz.cms.server.main.controller;
import com.rz.cms.server.main.utils.FileInfo;
import com.rz.cms.server.main.utils.HttpResult;
import com.rz.cms.server.main.utils.JesyFileUploadUtil;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
@RestController
@RequestMapping("upload")
public class FileController {
@CrossOrigin(origins = "*")
@PostMapping("file")
@ResponseBody
public String upload(MultipartFile file){
String result = null;
try {
FileInfo fileInfo = JesyFileUploadUtil.uploadFile(file, "http://localhost:8060");
result = fileInfo.getRelativePath();
} catch (IOException e) {
e.printStackTrace();
result = "";
}
return result;
}
}
5.页面效果如图
6. 基础效果图首先写出图片效果
文章标题 文章描述 选择标题图（图片分辨率建议为：200px * 200px）
7.参考
upload(){
_self = this;
//图片选择API
uni.chooseImage({
count:1,//一次只能选择一个文件
sizeType: ['original','compressed'], //可以指定上传的图片是否压缩还是原图 默认全有
sourceType:['album'] ,//从相册选择图片
success: function(res){
const tempFilePaths = res.tempFilePaths;//const声明后其值不可变
//uni-app的图片上传API
const uploadTask = uni.uploadFile({
url:'http://localhost:8070/upload/file',
filePath:tempFilePaths[0],
name:'file',
success:function(uploadFileRes){
_self.relativePath = uploadFileRes.data;
}
});
uploadTask.onProgressUpdate(function(res){
_self.percent = res.progress;//获得文件上传的进度
console.log("上传进度："+res.progress);
console.log("已经上传的进度："+res.totalBytesSent);
console.log("预计需要上传的数据总长度："+res.totalBytesExpectedToSend);
});
}
});
}
8.下面是中转站return里所需要的东西同样含义也进行了注释
return{
msg:null,
articleTitle:null,//文章标题
articleDescr:null,//文章简介
btnState:false,//上传禁止使用按钮 flase是不禁用
percent:0,//进度条
loading:false,//是否显示进度条
fileName:null,//上传的名称
relativePath:null,//文件上传后 后台返回的路径
cid:null
}
