HBuilder的上传文件

1.在HBuilder中修改pom.xml文件

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<!-- SpringBoot支持01、parent:Begin -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.2.RELEASE</version>
	</parent>
	<!-- SpringBoot支持01、parent:End -->
 
	<groupId>org.personal.qin.demos</groupId>
	<artifactId>upload_demo</artifactId>
	<version>1.0.0-SNAPSHOT</version>
	<packaging>jar</packaging>
 
	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<!-- java版本 -->
		<java.version>1.8</java.version>
	</properties>
 
	<dependencies>
		<!-- SpringBoot:Begin -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!-- SpringBoot:End -->
 
		<!-- SpringMVC:Begin -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
		</dependency>
		<!-- SpringMVC:End -->
		
		<!-- 文件上传:Begin -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.1</version>
		</dependency>
		<!-- 文件上传:End -->
		<!--跨服务器上传:Begin -->
		<dependency>
			<groupId>com.sun.jersey</groupId>
			<artifactId>jersey-client</artifactId>
			<version>1.19</version>
		</dependency>
		<dependency>
			<groupId>com.sun.jersey</groupId>
			<artifactId>jersey-core</artifactId>
			<version>1.19</version>
		</dependency>
		<!--跨服务器上传:End -->
 
	</dependencies>
 
	<build>
		<finalName>${project.artifactId}</finalName>
		<plugins>
			<!-- 资源文件拷贝插件 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-resources-plugin</artifactId>
				<configuration>
					<encoding>UTF-8</encoding>
				</configuration>
			</plugin>
			<!-- java编译插件 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
					<encoding>UTF-8</encoding>
				</configuration>
			</plugin>
			<!-- SpringBoot支持03、添加SpringBoot的插件支持:Begin -->
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			<!-- SpringBoot支持03、添加SpringBoot的插件支持:End -->
		</plugins>
	</build>
</project>

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;
 
 
/**
 * 跨服务器文件上传工具类
 * 
 * @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;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. 基础效果图首先写出图片效果

<uni-nav-bar @clickRight="save" @clickLeft="back()" fixed="true" leftIcon="back" leftText="返回" right-text="保存"
   title="添加文章"></uni-nav-bar>
 
  <uni-group title="文章管理: 添加文章" top="10" mode="card">
   <view style="width: 1000rpx; margin-left: auto; margin-right: auto;">
    <view style="margin-bottom: 15rpx;">文章标题</view>
    <input singleline="true" placeholder="标题是必填项" type="text" v-model="articleTitle"
     style="border: 1px solid #000000; border-radius: 5rpx; line-height: 40rpx; height: 40rpx; width: 1000rpx; margin-bottom: 35rpx; padding: 10rpx;" />
 
    <view style="margin-bottom: 15rpx;">文章描述</view>
    <textarea placeholder-style="color:#F76260" placeholder="描述内容建议在70字以内" v-model="articleDescr"
     style="border: 1px solid #000000; border-radius: 5rpx; height: 300rpx; width: 1000rpx; padding: 10rpx; margin-bottom: 35rpx;" />
 
    <view style="margin-bottom: 15rpx;">选择标题图（图片分辨率建议为：200px * 200px）</view>
    <button type="primary" :loading="loading" :disabled="btnState" @click="upload">选择照片</button>
   </view>
  </uni-group>
  <!-- 提示框 -->
  <uni-popup ref="popup" type="dialog">
   <uni-popup-dialog mode="base" title="通知" :content="msg" :duration="2000" :before-close="true" @close="close"
    @confirm="confirm"></uni-popup-dialog>
  </uni-popup>

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
			}