记录若依分离版图片上传至本地，下载和显示

泥太美

已于 2024-06-13 10:58:44 修改

阅读量1.9k

点赞数 18

文章标签： java vue.js

于 2024-06-12 18:31:31 首次发布

本文链接：https://blog.csdn.net/2302_78365657/article/details/139632566

版权

以下为个人理解有错误的地方欢迎指出

一、文件上传

1、演示效果

多选框选中一行

选择图片

上传成功

刷新

2、后端代码

保存的地址是当前项目的根目录下面的file/upload/id文件夹

@PostMapping("/addPartsUpload")
    public AjaxResult addPartsUpload(@RequestParam("id")Long id ,MultipartFile file) {
        Map<String,Object> map=new HashMap<>();
        System.err.println("id:"+id);
        System.err.println("file:"+file.getOriginalFilename());
        String filePath=System.getProperty("user.dir")+"/file/upload/"+id+"/";
        try {
            if (file.isEmpty()) {
                return AjaxResult.error("文件为空");
            }

            String fileName = System.currentTimeMillis()+"-"+file.getOriginalFilename();
            //文件上传的路径（当前项目的根目录）

            System.err.println(filePath);
            // 创建目标目录（如果不存在）
            File directory = new File(filePath);
            if (!directory.exists()) {
                directory.mkdirs();
            }
            // 保存文件到目标目录
            File uploadFile = new File(directory.getAbsolutePath() + File.separator + fileName);
            file.transferTo(uploadFile);
            String pathFan=filePath.replace("\\","/");
            //filePath获取到的地址斜杠是“ \ ”的（单斜杠是特殊符号，得用双斜杠代替），得换成“ / ”才能访问到

            System.err.println("替换后："+pathFan);
            map.put("quote_address",pathFan+fileName);
            map.put("id",id);
            //修改数据库
            momOfferService.uploadImage(map);
            return AjaxResult.success("文件上传成功",pathFan+fileName);
        } catch (IOException e) {
             return AjaxResult.error("文件上传失败: "+e);
        }

    }

3、前端代码

上传按钮

 <el-upload
            class="upload-demo"
            :disabled="single"
            ref="upload"
            accept=".png, .jpg"
            :action="uploadAction"
            :file-list="fileListVideo"
            :headers="headers1"
            :before-upload="fieldBeforeUpload"
            :on-success="successUpload"
            :on-change="handleChangePhoto"
            :auto-upload="false">
          <el-button slot="trigger" size="small" :disabled="single" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

其他属性可以查看Element UI官网

https://element.eleme.cn/#/zh-CN/component/upload

调后端的js

好像这个uploadAction可以不用加（我是小白），这样应该可以上传文件了（如果局域网内其他电脑要访问，就要使用本机的ip地址，使用localhost其他电脑访问不了）

二、文件下载

1、演示效果

2、后端代码

在浏览器上下载：前端传一个文件地址过来

 @GetMapping("/download")
    public void download(@RequestParam String filePath,HttpServletResponse response) throws IOException {
        System.err.println("下载文件地址:"+filePath);
        // 获取要下载的文件
        File file = new File(filePath);

        // 设置响应头信息
        response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition", "attachment; filename=\"" + file.getName() + "\"");
        response.setContentLength((int) file.length());

        // 读取文件并写入响应流
        try (InputStream inputStream = new FileInputStream(file);
             OutputStream outputStream = response.getOutputStream()) {
            byte[] buffer = new byte[4096];
            int bytesRead;
            while ((bytesRead = inputStream.read(buffer)) != -1) {
                outputStream.write(buffer, 0, bytesRead);
            }
        }
    }

3、前端代码

 <el-button
            size="mini"
            type="text"
            title="附件下载"
            icon="el-icon-download"
            @click="download(scope.row)"
            v-hasPermi="['mom:offer:download']"
          ></el-button>

点击事件直接跳到后端（如果局域网内其他电脑要访问，就要使用本机的ip地址，使用localhost其他电脑访问不了）

三、显示图片

1、演示效果

2、后端代码

别人的都是直接使用下载的controller就能显示，我的就只是且只能下载，所以我下载和显示分开写的

@GetMapping("/fileView")
    public void fileView(@RequestParam String filePath,HttpServletResponse response) throws IOException {
        System.err.println("显示图片地址："+filePath);
        // 获取要下载的文件
        File file = new File(filePath);
        if (!file.exists()){
            return;
        }
        // 设置响应头信息
        response.setContentType("application/octet-stream");
        response.setHeader("Content-Disposition", "inline; filename=\"" + file.getName() + "\"");
        response.setContentLength((int) file.length());

        // 读取文件并写入响应流
        try (InputStream inputStream = new FileInputStream(file);
             OutputStream outputStream = response.getOutputStream()) {
            byte[] buffer = new byte[4096];
            int bytesRead;
            while ((bytesRead = inputStream.read(buffer)) != -1) {
                outputStream.write(buffer, 0, bytesRead);
            }
        }
    }

3、前端代码

<el-table-column label="图片" align="center" prop="quote_address" show-overflow-tooltip >
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="fileViewAction+scope.row.quote_address"
            :preview-src-list="[fileViewAction+scope.row.quote_address]"
          >
          </el-image>
        </template>
      </el-table-column>

（如果局域网内其他电脑要访问，就要使用本机的ip地址，使用localhost其他电脑访问不了）