vue+spring完成上传下载

最新推荐文章于 2023-07-18 00:19:44 发布

不积跬步无以至千里-陕西西安

最新推荐文章于 2023-07-18 00:19:44 发布

阅读量177

点赞数

文章标签： vue.js spring 前端 vue+spring上传下载

本文链接：https://blog.csdn.net/qq_41082640/article/details/130095443

版权

该文章详细描述了使用Vue组件进行文件上传，通过设置上传动作、预览、移除等事件处理，以及后端SpringBoot接收MultipartFile进行文件保存的操作。同时，文章还涵盖了文件下载的实现，利用Axios请求二进制数据并创建下载链接。

摘要由CSDN通过智能技术生成

上传

vue

        <el-upload class="upload-demo" :action="fileUpload" :on-preview="download" :on-remove="handleRemove"
            :before-remove="beforeRemove" multiple :limit="30" :on-exceed="handleExceed" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>


		data() {
        return {
            fileList: [],
            fileUpload: base.basePath + base.fileUpload
        };
    }

    basePath: "http://localhost:8801/wxservice",
    fileUpload: "/file/uploadSftp",

后端

    @PostMapping("/upload")
    public R uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return R.error("文件为空");
        }
        // 获取文件名
        String fileName = file.getOriginalFilename();// 文件上传后的路径
        log.info("uploadFile fileName:{}", fileName);
        // 文件上传后的路径
        String filePath = null;
        try {
            filePath = new File("").getCanonicalPath() + "/tmp/uploadFile/";
        } catch (IOException e) {
            e.printStackTrace();
        }
        //存储路径
        String tagFilePath = filePath + System.currentTimeMillis() + fileName;
        log.info("tagFilePath:{}", tagFilePath);
        File dest = new File(tagFilePath);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            log.info("uploadFile file.transferTo:{}");
            file.transferTo(dest);
        } catch (Exception e) {
            e.printStackTrace();
            return R.error(fileName + "上传失败");
        }

        FileDto fileDto = insertFileRecordIntoDB(fileName, tagFilePath);
        return R.ok(fileDto);
    }

下载

vue

download(file) {
            axios({
                url: base.fileDownload + '?id=' + file.id,
                method: 'GET',
                responseType: 'blob' // 表示接收二进制数据
            })
                .then(response => {
                    let blob = new Blob([response.data]);
                    let fileName = file.fileName;
                    if (window.navigator.msSaveOrOpenBlob) {
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        var link = document.createElement("a");
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName;
                        link.click();
                        //释放内存
                        window.URL.revokeObjectURL(link.href);
                    }
                })
                .catch(error => {
                    console.error(error)
                })
        }

后端

   @GetMapping("/download")
    public ResponseEntity<byte[]> downloadFile(String id) throws IOException {
        FileDto fileDto = fileService.getById(id);
        File file = new File(fileDto.getFilePath());
        byte[] data = Files.readAllBytes(file.toPath());
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        headers.setContentDispositionFormData("attachment", file.getName());
        headers.setContentLength(data.length);
        return new ResponseEntity<>(data, headers, HttpStatus.OK);
    }

导包

最后附上接口的导包

import com.example.wxservice.dto.FileDto;
import com.example.wxservice.service.FileService;
import com.example.wxservice.test.ftpfileload.SFTPUtil;
import com.example.wxservice.util.R;
import com.jcraft.jsch.SftpException;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.annotation.Resource;
import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.util.List;

pom

        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.10</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>