如何将文件上传到服务器
一、在idea里pom.xml文件下添加以下代码
commons-fileupload
commons-fileupload
1.3.1
com.sun.jersey
jersey-client
1.19
com.sun.jersey
jersey-core
1.19
二、在idea里domain下新建utils工具包下创建俩个文件FileInfo和JesyFileUploadUtil
package com.ruoyi.basic.domain.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 + "]";
}
}
package com.ruoyi.basic.domain.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;
/**
* 跨服务器文件上传工具类
*
* @author qin
*
*/
public class JesyFileUploadUtil {
/**
* 上传文件
*
* @param file --多媒体文件
* @param servlerUrl --服务器路径http://127.0.0.1:8080/ssm_image_server
* @return
* @throws IOException
*/
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;
// }
}三、在tomcat服务器下创建一个upload文件夹
D:\tomcat\apache-tomcat-8.5.45\webapps\ROOT\upload
并在D:\tomcat\apache-tomcat-8.5.45\conf文件夹下打开web.xml文件修改以下代码
default
org.apache.catalina.servlets.DefaultServlet
debug
0
listings
false
readonly
false
1
四，Uni_app里data里存放的数据
data(){
return{
btnState:false,//按钮的状态
percent:0,//进度条从0开始
loading:false,//进度是否显示
fileName:null,//上传的文件
relativePath:null,//文件上传后，后台返回的路径
}
},五，methods里的业务
upload(){
_self=this;
uni.chooseImage({//uniapp图片选择API
count:1,
sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者皆写
sourceType:['album'],//从相册选择
success:function(res){
const tempFilePaths= res.tempFilePaths;
//uniapp的图片上传API
const uploadTask=uni.uploadFile({
url:'http://localhost:8070/upload/file',
filePath:tempFilePaths[0],
name:'file',
success:function(uploadFileRes){
console.log(uploadFileRes.data);
_self.relativePath=uploadFileRes.data;
}
});
uploadTask.onProgressUpdate(function(res){
_self.percent=res.progress;//获得文件上传的进度
console.log('上传进度'+res.progress);
console.log('已经上传进度'+res.totalBytesSent);
console.log('预计需要上传的数据总长度'+res.totalBytesExpectedToSend);
});
}
});
},六、element UI文件上传
template代码
点击上传
使用 import { getToken } from "@/utils/auth"; 来获取密钥
datal代码
headers: {
Authorization: "Bearer " + getToken()
},
videoAction: process.env.VUE_APP_BASE_API + "/basic/video/video_upload",
videofileList: [],methods代码
videoBeforeUpload(file) {
// this.form.videoSize = (file.size / 1024 / 1024).toFixed(2) + "MB";
return true;
},
/** 视频上传成功之后的处理逻辑 */
videoSuccess(response, file, fileList){
console.log(response);
this.form.address=response;
this.form.url=response;
if(response.code == 200){
this.form.address = response;
} else {
this.videofileList = [];
// this.$message.error(response.msg);
}
},
[点击并拖拽以移动]