前端文件上传下载与预览,文件流下载文件流预览文件流上

 element的 el-upload实现的文件上传文件下载文件预览,文件流。

<*
*url 要上传到的地址
*fileChange添加文件的时候触发的回调
*fileRemove移除文件的时候触发的回调
*handleAvatarSuccess上传成功后触发的回调
**>

<el-form-item label="上传附件:">
    <el-upload
      :action="url"
      :on-change="fileChange"
      :on-remove="fileRemove"
      :on-success="handleAvatarSuccess"
      :on-upload="false"
      class="upload-demo"
      drag
      multiple
     >
         <i class="el-icon-upload" />
         <div class="el-upload__text">
              将文件拖到此处,或<em>点击上传</em>
         </div>
     </el-upload>
  </el-form-item>

效果:

 js代码:

    attachmentsPreview(value) {
      if (value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'pdf' || value.fileOriginName.substring((value.fileOriginName.length - 3)) == 'png') { // 判断格式,目前只支持pdf和png格式预览,其他格式为下载
        const url = process.env.VUE_APP_BASE_API + '/sysFileInfo/private/preview?fileId=' + value.fileId + '&token=' + store.getters.token; // 生成预览地址
        window.open(url); // 打开新页面进行预览
        URL.revokeObjectURL(url);// 释放URL对象
      } else {
        axios
          .get(process.env.VUE_APP_BASE_API + '/sysFileInfo/publicDownload?fileId=' + value.fileId, {
            headers: { // 下载请求需要携带token,不用带token的可以注释掉 headers
              Authorization: store.getters.token
            },
            responseType: 'blob'
          })
          .then((res) => {
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel'
            });
            const objectUrl = URL.createObjectURL(blob); // 生成下载链接
            const a = document.createElement('a'); // 生成a标签
            a.style.display = 'none';
            a.href = objectUrl;
            a.download = value.fileOriginName; // 指定下载文件名
            a.click();
            URL.revokeObjectURL(a.href); // 释放URL对象
            this.downloadLoading = false;
          });
      }
    },

上传成功:

 该方法可以进行多文件上传

不懂的地方欢迎留言

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是Java代码根据来生成文件并返回前端预览显示的示例: ```java @RestController public class FileController { @PostMapping(value = "/preview") public ResponseEntity<?> previewFile(@RequestParam("file") MultipartFile file) throws IOException { // 读取文件 InputStream inputStream = file.getInputStream(); // 根据文件生成文件 File tempFile = File.createTempFile("temp", ".pdf"); try (OutputStream outputStream = new FileOutputStream(tempFile)) { byte[] buffer = new byte[1024]; int bytesRead; while ((bytesRead = inputStream.read(buffer)) != -1) { outputStream.write(buffer, 0, bytesRead); } } // 返回生成的文件前端预览 HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.APPLICATION_PDF); headers.setContentDisposition(ContentDisposition.builder("inline").filename("preview.pdf").build()); ByteArrayResource resource = new ByteArrayResource(Files.readAllBytes(tempFile.toPath())); return new ResponseEntity<>(resource, headers, HttpStatus.OK); } } ``` 在这个示例中,我们使用Spring Boot框架编写了一个RestController,该Controller提供了一个名为previewFile的POST接口,用于接收前端上传的文件,并根据文件生成一个PDF文件,并将生成的PDF文件返回给前端进行预览显示。 在Controller中,我们使用MultipartFile对象来接收前端上传的文件,然后从MultipartFile对象中获取文件,使用File.createTempFile()方法来生成临时文件,再将文件写入到临时文件中,最后将生成的PDF文件以ByteArrayResource的形式返回给前端进行预览显示。在返回响应时,我们设置了Content-Type为application/pdf,Content-Disposition为inline,并将ByteArrayResource作为响应主体返回给前端

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值