java vue 上传文件 下载文件

7 篇文章 0 订阅

上传文件代码

vue代码()

  <el-upload
	  class="upload-demo"
	  action='/rest/admin/uploading'
	  :headers="header"
	  :on-preview="handlePreview"
	  :on-remove="handleRemove"
	  :before-remove="beforeRemove"
	  multiple
	  :on-exceed="handleExceed"
	  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

    //触发的方法名字
    handleFileChange (e) {
      debugger
   let file = e.target.files[0];
      let param = new FormData(); //创建form对象
      param.append('file',file);//通过append向form对象添加数据
      console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
      let config = {
      headers:{'Content-Type':'multipart/form-data'}
      }; //添加请求头
      this.$post('/rest/admin/uploading',param,config)
      .then(response=>{
          console.log(response.data);
      })
  }
  }

java代码

    /**
     * 文件上传
     *
     * @param request 文件上传请求
     * @return 返回值
     */
    @ApiOperation("文件上传")
    @ApiImplicitParams({})
    @PostMapping(value = "/uploading")
    @ResponseBody
    public String uploadFile(HttpServletRequest request) {
      MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
      MultipartFile file = multipartRequest.getFile("file");
      if (file.isEmpty()) {
        return "上传文件为空";
      }
      // 获取文件全名a.py
      String fileName = file.getOriginalFilename();
      String templatePath = "D:" + File.separator + "fileUpload";
      // 获取文件的后缀名
      String suffixName = fileName.substring(fileName.lastIndexOf("."));
      //获取文件名
//  		String prefixName = fileName.substring(0, fileName.lastIndexOf("."));
      // 解决中文问题,liunx 下中文路径,图片显示问题
      fileName = UUID.randomUUID() + suffixName;
      File dest0 = new File(templatePath);
      File dest = new File(dest0, File.separator + fileName);
      //文件上传-覆盖
      try {
        // 检测是否存在目录
        if (!dest0.getParentFile().exists()) {
          dest0.getParentFile().mkdirs();
          //检测文件是否存在
        }
        if (!dest.getParentFile().exists()) {
          dest.getParentFile().mkdirs();
        }
        file.transferTo(dest);
        return fileName;
      } catch (Exception e) {
        return "上传失败";
      }

    }

文件下载
vue代码

  methods: {
    //触发的方法名字
    clickn () {
       axios({
          url: '/rest/admin/download',
          method: 'post',
          data: {},
          responseType: 'blob'    // 重点在于配置responseType: 'blob'
      }).then(res => {
        debugger
          const link = document.createElement('a');  // 创建元素
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });  
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);   // 创建下载的链接
          //num++
          link.setAttribute('download', '文件下载测试.xlsx');  // 给下载后的文件命名
          document.body.appendChild(link);
          link.click();  // 点击下载
          document.body.removeChild(link);  //  下载完成移除元素
          window.URL.revokeObjectURL(link.href);  // 释放掉blob对象
      })
      .catch(_ => {
      });
    },

java代码

 @ApiOperation("文件下载")
    @ApiImplicitParams({})
    @ResponseBody
    @RequestMapping(value = "/download",method = RequestMethod.POST)
    public String download(HttpServletResponse response) throws UnsupportedEncodingException{
    	 String filename="0fc7b310-8674-48e7-ae0b-63fa09a872cd.txt";
         String filePath = "D:/fileUpload" ;
         File file = new File(filePath + "/" + filename);
         if(file.exists()){ //判断文件父目录是否存在
             response.setContentType("application/vnd.ms-excel;charset=UTF-8");
             response.setCharacterEncoding("UTF-8");
            // response.setContentType("application/force-download");
             response.setHeader("Content-Disposition", "attachment;fileName=" +   java.net.URLEncoder.encode(filename,"UTF-8"));
             byte[] buffer = new byte[1024];
             FileInputStream fis = null; //文件输入流
             BufferedInputStream bis = null;

             OutputStream os = null; //输出流
             try {
                 os = response.getOutputStream();
                 fis = new FileInputStream(file);
                 bis = new BufferedInputStream(fis);
                 int i = bis.read(buffer);
                 while(i != -1){
                     os.write(buffer);
                     i = bis.read(buffer);
                 }

             } catch (Exception e) {
                 // TODO Auto-generated catch block
                 e.printStackTrace();
             }
             System.out.println("----------file download---" + filename);
             try {
                 bis.close();
                 fis.close();
             } catch (IOException e) {
                 // TODO Auto-generated catch block
                 e.printStackTrace();
             }
         }
         // return好像不重要,前台取值在blob中取,就是文件本身
         return "03fcf563-f6e3-4603-8022-62f5a94d99e5.png";

    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值