如何将文件上传到服务器

一、在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);
      }
    },

[点击并拖拽以移动]
​