2021-08-11

Java_lwt

墨衍会员 · AI 创作全网分发码龄6年

关注

原创最新推荐文章于 2024-11-07 09:49:29 发布 152 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

SpringBoot+Vue中实现文件上传（图片）

1、导入依赖

<dependency>
	<groupId>cn.hutool</groupId>
	<artifactId>hutool-all</artifactId>
	<version>5.7.3</version>
</dependency>

2、编写Controller上传接口

@Value("${server.port}")
private String port;

private static final String ip="http://localhost";
/**
 * 上传接口
 * @param file
 * @return editor/upload
 * @throws IOException
 */
@PostMapping("/upload")
public Result<?> upload(MultipartFile file) throws IOException {
    String originalFilename = file.getOriginalFilename();  // 获取源文件的名称
    // 定义文件的唯一标识（前缀）
    String flag = IdUtil.fastSimpleUUID();
    String rootFilePath = System.getProperty("user.dir") + "/files/" + flag + "_" + originalFilename;  // 获取上传的路径
    FileUtil.writeBytes(file.getBytes(), rootFilePath);  // 把文件写入到上传的路径
    return Result.success(ip + ":" + port + "/files/" + flag);  // 返回结果 url
    //return Result.success();
}

3、编写Controller下载接口

/**
* 下载接口
* @param flag
* @param response
*/
@GetMapping("/{flag}")
public void getFiles(@PathVariable String flag,HttpServletResponse response) {
	OutputStream os;  // 新建一个输出流对象
	String basePath = System.getProperty("user.dir") + "/files/";  // 定于文件上传的根路径
	List<String> fileNames = FileUtil.listFileNames(basePath);  // 获取所有的文件名称
	String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse("");  // 找到跟参数一致的文件
	try {
	    if (StrUtil.isNotEmpty(fileName)) {
	        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
	        response.setContentType("application/octet-stream");
	        byte[] bytes = FileUtil.readBytes(basePath + fileName);  // 通过文件的路径读取文件字节流
	        os = response.getOutputStream();   // 通过输出流返回文件
	        os.write(bytes);
	        os.flush();
	        os.close();
	    }
	} catch (Exception e) {
	    System.out.println("文件下载失败");
	}
}

4、在vue界面中显示
1)、上传

<el-form-item label="封面" >
    <el-upload ref="upload" action="http://localhost:6060/singer/upload" :on-success="filesUploadSuccess">
        <el-button  type="primary">点击上传</el-button>
    </el-upload>
</el-form-item>

2)、上传成功后清除显示的文件

methods: {
    filesUploadSuccess(res){
         console.log(res);
         this.form.pic=res.pic;
     },
     add(){
         this.dialogVisible=true;
         this.form={};
         if(this.$refs['upload']){
             this.$refs['upload'].clearFiles();//清空历史文件列表
         }
     }
}

3)、显示

<el-table-column label="封面">
    <template #default="scope">
        <el-image
                style="width: 100px;height: 100px"
                :src="scope.row.pic"
                :preview-src-list="[scope.row.pic]">

        </el-image>
    </template>
</el-table-column >