文件上传下载简单示例

图片和视频都可以算是文件可以做统一处理。

vue组件:

<template>
  <div style="margin: 100px auto">
    <el-upload
      action="fileuPload"
      list-type="listFile"
      :http-request="uploadFile"
      :limit="1"
    >
      <el-button size="small" type="primary">选取文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import { fileDownload, fileUpload } from "@/api/common";
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    uploadFile(file) {
      console.log(file);
      const formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        console.log(res.data.fileName);
      });
    },
  },
};
</script>

api:

import request from "@/utils/request";

export function fileUpload(data) {
  return request({
    url: "/common/upload",
    method: "post",
    data,
  });
}

export function fileDownload(params) {
  return request({
    url: "/common/download",
    method: "get",
    params,
  });
}

后端接口:



import com.example.examservice.common.R;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.UUID;



@RestController
@RequestMapping("/common")
public class CommonController {

	@Value("${exam.path}")
	private String basePath;

	// 文件上传
	@PostMapping("/upload")
	public R upload(MultipartFile file) {

		// 原始文件名
		String originalFilename = file.getOriginalFilename();
		// 获取后缀
		String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
		// UUID重新生成文件,防止重复覆盖
		String fileName = UUID.randomUUID() + suffix;// xxx.jpg  xxx.mp4

		try {
			// 文件转存位置
			file.transferTo(new File(basePath + fileName));
		} catch (IOException e) {
			e.printStackTrace();
		}
		return R.ok().data("fileName", fileName);
	}

	// 文件下载
	@GetMapping("/download")
	public void download(String name, HttpServletResponse response) {
		try {
			// 输入流,读取文件内容
			FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));
			// 输出流,回显文件内容
			ServletOutputStream outputStream = response.getOutputStream();

			// 获取后缀
			String suffix = name.substring(name.lastIndexOf("."));
			
			if (suffix.equals("mp4"))
				// 设置响应头,告诉浏览器这是一个mp4视频文件
				response.setContentType("video/mp4");
			else if (suffix.equals("jpg"))
				// 设置响应头,告诉浏览器这是一个jpg图片文件
				response.setContentType("image/jpeg");
			
			int len = 0;
			byte[] bytes = new byte[1024];
			while ((len = fileInputStream.read(bytes)) != -1) {
				outputStream.write(bytes, 0, len);
				outputStream.flush();
			}

			// 关闭资源
			fileInputStream.close();
			outputStream.close();

		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

流程可以概况为:

前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名

如果想要把视频回显或获取视频,那么整体流程可以看成:

前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名=>前端拿到文件名后根据文件名发送请求=>后端根据文件名从文件夹中拿到文件并返回对应文件

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java中实现文件上传下载可以使用Servlet或SpringMVC框架,这里我为您提供SpringBoot框架的代码示例。 1. 文件上传: 在SpringBoot中,我们可以使用MultipartFile类来接收上传的文件。以下是一个简单文件上传示例: ```java @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { String fileName = file.getOriginalFilename(); String filePath = "/path/to/save/file/" + fileName; File dest = new File(filePath); file.transferTo(dest); return "success"; } ``` 其中,@PostMapping("/upload")表示接收POST请求,并映射到/upload路径;@RequestParam("file")表示接收名为"file"的文件参数,将其转化为MultipartFile类型;MultipartFile提供了transferTo方法,可以将上传的文件保存到指定的文件路径中。 2. 文件下载: 在SpringBoot中,我们可以使用ResponseEntity类来实现文件下载。以下是一个简单的文件下载示例: ```java @GetMapping("/download") public ResponseEntity<byte[]> download() throws IOException { String filePath = "/path/to/download/file/"; File file = new File(filePath); HttpHeaders headers = new HttpHeaders(); headers.setContentDispositionFormData("attachment", file.getName()); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); return new ResponseEntity<>(FileUtils.readFileToByteArray(file), headers, HttpStatus.OK); } ``` 其中,@GetMapping("/download")表示接收GET请求,并映射到/download路径;HttpHeaders提供了setContentDispositionFormData方法,可以设置下载文件的名称;MediaType.APPLICATION_OCTET_STREAM表示以二进制流的形式下载文件。FileUtils.readFileToByteArray方法可以将指定文件读取为字节数组,最终使用ResponseEntity返回下载结果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值