vue上传前后台传输文件及Java web后台保存管理

一. 传输文件管理
开始：首先是配置后台接收文件相关类加载：
① ssm框架配置如下：
（1）注意此处id务必是multipartResolver
（2）引入文件上传相关jar包，commons-io 、commons-fileupload
（3）enctype属性必须为：multipart/form-data

<!--开启文件接收 最大10m 2020-01-06  -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="maxUploadSize" value="10485760" />
	</bean>

②springboot框架：
（1）引入maven

<dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
</dependency>

（2）application.properties配置

# 上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=10MB

1.vue前台将文件以formData类型打开发送

dialogFileInfo(){//文件上传到服务器
            if(this.dialogFile==null||this.dialogFile==""){
                this.$message({type:"warning",message: "请先选择文件上传！"});
                return;
            }
            var files=new FormData();
            files.append("diaFile",this.dialogFile);//单个文件上传
            console.log(this.dialogFile.original);
              this.$axios({
                  url:"/api/sendMessage/diaFilename",
                  method:"post",
                  data:files,
              }).then(data=>{
                  //this.isDisplay.files=false;
                  var obj = {person: this.realname, words: "文件："+this.dialogFileName+"-上传成功！！！"};
                  this.arr.push(obj);
                  //this.$websocket.state.websock.send(this.userName+"#$文件:"+this.dialogFileName+"#"+this.receiveUserName);
                  this.$message({type:"success",message: "文件上传成功！！！"});
              }).catch(error=>{
                  this.$message("连接超时！");
              })
          },

2.后台Java接收并保存：（我在此处数据库存的是文件地址，真实文件另存）：

/**
	 * 文件上传
	 * @param keyWord
	 * @return
	 */
	@SuppressWarnings("rawtypes")
	@RequestMapping(value="/diaFilename",method=RequestMethod.POST,produces="application/json")
	public NmOptData diaFile(@RequestParam("diaFile")MultipartFile keyWord) {
		try {
			String saveFile="E:\\savedialogfile\\";//储存的地址
			File file=new File(saveFile);
			if(!file.exists()) {
				file.createNewFile();
			}
			FileOutputStream writer=new FileOutputStream(new File(file,keyWord.getOriginalFilename()));
			writer.write(keyWord.getBytes());
			writer.flush();
			writer.close();
			return ReturnDataUtils.getSuccess();
		} catch (Exception e) {
			return ReturnDataUtils.getFailCode(ErrorCodeUtil.NMOPT_OPERFAIL);
		}
	}

3.文件下载的vue前端：

getFileDownLoad(fName){//下载文件
            var parameter=new URLSearchParams();
            parameter.append("fileName",fName.split(":")[1]);
              this.$axios({
                  url:"/api/sendMessage/getFileName",
                  method:"post",
                  data:parameter,
                  responseType: 'blob',//单个文件务必设置文件类型
              }).then(data=>{//获取数据
                  var response=data.data;
                  /*let contentDisposition = data.headers['content-disposition'];//请求头中寻求文件名此处没用到可以自己根据需求使用
                  let fileName = contentDisposition.substring(contentDisposition.indexOf('=')+1);*/
                 /* console.log('fileName=' + fileName);*/
                  let url = window.URL.createObjectURL(new Blob([response]));//将获取的文件转化为blob格式
                  let a = document.createElement('a');//此处向下是打开一个储存位置
                  a.style.display = 'none';
                  a.href = url;
                  a.setAttribute('download',fName.split(":")[1]);
                  document.body.appendChild(a);
                  a.click();//点击下载
                  document.body.removeChild(a);// 下载完成移除元素
                  window.URL.revokeObjectURL(url);// 释放掉blob对象
                  var obj = {person: this.realname, words: "文件："+fName.split(":")[1]+"-接收成功！！！"};
                  this.arr.push(obj);
                 // this.$websocket.state.websock.send(this.userName+"#文件"+fName.split(":")[1]+"接收完成#"+this.receiveUserName);
              }).catch(error=>{
                  this.$message("连接超时");
              })
          },

4.文件下载时后台代码如下：

/**
	 * 文件获取
	 * @param keyWord
	 * @return
	 */
	@RequestMapping(value="/getFileName",method=RequestMethod.POST)
	public byte[] getFile(@RequestParam("fileName")String fileName) {
		String path="E:\\savedialogfile\\";//从储存地址取出
		File file=new File(path+fileName);
		byte[] fleBytes = null;
		FileInputStream fileInputStream = null;
		ByteArrayOutputStream bos = null;
		try {
			fileInputStream=new FileInputStream(file);
			bos = new ByteArrayOutputStream();
			byte[] bytes=new byte[1024];
			int len=-1;
			while((len=fileInputStream.read(bytes))!=-1) {
				bos.write(bytes, 0, len);
			}
			fleBytes=bos.toByteArray();//转化为字节流
		} catch (FileNotFoundException e) {
			e.printStackTrace();
		} catch (IOException e) {
			e.printStackTrace();
		}finally {
			try {
				fileInputStream.close();
				bos.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
		return fleBytes;//返回数据
	}

结语：这样就完成了一个单个文件的上传与下载，有需要的有问题的兄跌欢迎联系