SpringBoot读取本地图片和视频回显到浏览器中

 public void getFile(HttpServletResponse response, String name) {
       
        File file = new File("C:\\Users\\shuwen\\WorkCode\\imp-backend-http\\imp-backend-http-service\\src\\main\\resources\\template\\Snipaste.png");// 视频路径
        if (!file.exists()) {
            throw new RuntimeException("视频文件不存在!");
        }
        byte[] fba = getFileByteArr(file);

        OutputStream sos = null;
        try {
            // 如果文件类型时视频的话"Content-Type", "video/MP4"
            response.setHeader("Content-Type", "image/png");
            sos = response.getOutputStream();
            sos.write(fba);
            sos.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private byte[] getFileByteArr(File file) {
        byte[] buffer = null;
        try {
            FileInputStream fis = new FileInputStream(file);
            ByteArrayOu
后端代码实现: 1.引入相关依赖 ```xml <!-- 文件上传 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.6</version> </dependency> ``` 2.配置文件上传相关信息 ```yaml # 文件上传限制 spring.servlet.multipart.max-file-size=10MB spring.servlet.multipart.max-request-size=10MB spring.servlet.multipart.enabled=true ``` 3.编写文件上传接口 ```java @RestController @RequestMapping("/api/file") public class FileController { @PostMapping("/upload") public String upload(@RequestParam("file") MultipartFile file) throws IOException { if (file.isEmpty()) { return "文件为空"; } String fileName = file.getOriginalFilename(); String filePath = "D:\\temp\\"; File dest = new File(filePath + fileName); file.transferTo(dest); return "上传成功"; } } ``` 前端代码实现: 1.安装 axios 和 element-ui ```bash npm install axios element-ui --save ``` 2.编写文件上传组件 ```vue <template> <div> <el-upload class="upload-demo" action="/api/file/upload" :auto-upload="false" :on-change="handleChange" > <el-button slot="trigger" type="primary">选取文件</el-button> <el-button v-if="imageUrl" type="success" @click="handleUpload">上传到服务器</el-button> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过10MB</div> </el-upload> <img v-if="imageUrl" :src="imageUrl" style="max-width: 100%;"> </div> </template> <script> import axios from 'axios'; import { Message } from 'element-ui'; export default { data() { return { imageUrl: '', file: null, }; }, methods: { handleChange(file) { this.file = file.raw; this.imageUrl = URL.createObjectURL(this.file); }, handleUpload() { const formData = new FormData(); formData.append('file', this.file); axios.post('/api/file/upload', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }).then(() => { Message.success('上传成功'); }).catch(() => { Message.error('上传失败'); }); }, }, }; </script> ``` 至此,图片上传及回显的代码实现就完成了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悲伤酸菜鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值