图片上传下载

数据模型:

imageUrl: '',

<el-form-item label="楼盘图片:" prop="pic" class="uploadImg" v-model="emp.pic">
                <el-upload
                        class="avatar-uploader"
                        action="/premises/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

/*图片上传下载*/
            handleAvatarSuccess(res, file) {
                this.imageUrl = "/premises/download?filename="+res;
                this.emp.pic=res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

图片上传

/**
     * 图片上传
     * @return
     */
  

@PostMapping("upload")
public String Upload(MultipartFile file){//获取文件名称,使用UUID工具类为文件重命名String filename = file.getOriginalFilename();System.out.println(filename);String fileType = filename.substring(filename.lastIndexOf("."));filename= UUID.randomUUID().toString().replace("-","")+fileType;// File picFile = new File("C://Users//17630//Pictures//Saved Pictures//"+filename);File picFile = new File("D:\\img\\"+filename);try {file.transferTo(picFile);} catch (IOException e) {throw new RuntimeException(e);}return filename;
}

图片下载


    @GetMapping("/download")
    public void download(String filename, HttpServletResponse response){
        FileInputStream fileInputStream=null;
        ServletOutputStream outputStream=null;
        try {
            fileInputStream=new FileInputStream(new File("D://imgs/"+filename));
            outputStream= response.getOutputStream();
            int len=0;
            byte[] bytes=new byte[1024];
            while ((len=fileInputStream.read(bytes))!=-1){
                outputStream.write(bytes);
                outputStream.flush();
            }
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
                outputStream.close();
                fileInputStream.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

表格

<template slot-scope="scope">
                    <img style="width:100px;height: 50px" v-bind:src="'/premises/download?name='+scope.row.pic">
                </template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自制java工具实现 ctrl+c+c 翻译鼠标选中文本

前言 本功能的实现基于这篇笔记 http://t.csdnimg.cn/1I8ln&#xff0c;本文阅读过程中有疑惑都可以查看此笔记 实现思路&#xff1a;检测到按压ctrl c c 后&#xff0c;获取当前剪切板文字&#xff0c;调用百度翻译api。 实现结果&#xff1a; 完整代码在最后 实现过程 1 监控…

关于鸿蒙的笔记整理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、关于样式1 . 默认单位 vp2 . 写公共样式 二 、 加载图片三 、 父子组件传值四 、 自定义构建函数 Builder五、构建函数-BuilderParam 传递UI 一、关于样式 1 .…

Java中请求生成唯一追溯TraceId

Java中请求生成唯一追溯TraceId 一&#xff1a;背景 因为是微服务架构,平常日志太多,看日志不太好查,所以想要从一整个链路当中获取一个唯一标识,比较好定位问题&#xff0c; 原理就是从gateway网关将标识传递到下游,下游服务拿到这个标识,响应结束后将traceId反向写入响应体…

[论文笔记] Megtron_LM 0、报错:vscode调试无法传进去参数 launch.json文件获取args参数

解决方法&#xff1a; 配置好launch.json文件后&#xff0c;应该点运行和调试里面的运行按钮。而不是直接点文件右上角的debug。 可以看到terminal中&#xff0c;如果没有正常加载launch.json&#xff0c;则参数中没有args的参数。 如果正常加载&#xff0c;可以看到args的很多…

匿名内部类为什么泄漏,Lambda为什么不泄漏(案例不涉及持外部引用的情况,即:只分析匿名内部类和Lambda内部类情况)

theme: channing-cyan 在Android开发中&#xff0c;内存泄露发生的场景其实主要就两点&#xff0c;一是数据过大的问题&#xff0c;而是调用与被调用生命周期不一致问题&#xff0c;对于对象生命周期不一致导致的泄漏问题占90%&#xff0c;最常见的也不好分析的当属匿名内部类…

Java中的IO与NIO篇----第四篇

系列文章目录 文章目录 系列文章目录前言一、NIO 的非阻塞二、Channel三、Buffer四、Selector前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 一、NIO 的非阻塞 I…

Java:HeapMemory和DirectMemory配置与使用介绍

目录 一、Heap内存 1、查看Heap内存配置的最大值 2、配置Heap内存最大值的方式 3、配置Heap内存最小值的方式 4、查看已使用Heap内存的方式 5、查看未使用Heap内存的方式 二、Direct内存 1、查看Direct内存配置的最大值 2、配置Direct内存最大值的方式 3、获取Direct…

C++ OpenGL 3D GameTutorial 1:Making the window with win32 API学习笔记

视频地址https://www.youtube.com/watch?vjHcz22MDPeE&listPLv8DnRaQOs5-MR-zbP1QUdq5FL0FWqVzg 一、入口函数 首先看入口函数main代码&#xff1a; #include<OGL3D/Game/OGame.h>int main() {OGame game;game.Run();return 0; } 这里交代个关于C语法的问题&#x…

释放创造力:可视化页面渲染引擎在低代码开发平台的应用

本文由葡萄城技术团队发布。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 什么是页面渲染引擎? 页面渲染引擎是低代码开发平台的核心组件之一&#xff0c;它负责将开发者设计的页面布局和用户…

计算机网络学习笔记(5)——运输层

本文继续整理计算机网络体系架构知识内容。今日主讲——运输层。 网络层只把分组发送到目的主机&#xff0c;但是真正通信的并不是主机而是主机中的进程。 运输层提供了应用进程间的逻辑通信。运输层向高层用户屏蔽了下面网络层的核心细节&#xff0c;使应用程序看 见的好像在两…

python+selenium爬虫笔记

本文只是做例子&#xff0c;具体网站路径麻烦你们换下&#xff0c;还有xpath路径也换下 一、安装所需要的组件&#xff08;此处采用谷歌&#xff09; 1、安装驱动 查看你的浏览器版本&#xff0c;去安装对应的版本 下载驱动 下载驱动路径 之前版本的 输入这个路径下载下来解压…

js api scrollIntoView

前言 今天记录一个非常常用的js api scrollIntoView 它可以轻易的让目标元素滚动到可视范围之内&#xff0c;而无需手动计算偏移量 一、用法 document.querySelector(.dept-title).scrollIntoView()二、参数 scrollIntoView() scrollIntoView(boolean) 默认为 true&#xf…

TikTok革新游戏规则:解读短视频对社交媒体的影响

在社交媒体的巨浪中&#xff0c;TikTok以其独特的短视频形式和强大的创意社区&#xff0c;重新定义了游戏规则。这个以15秒视频为核心的平台&#xff0c;不仅让用户获得了表达自我的新方式&#xff0c;更深刻地影响了社交媒体的演进。本文将深入解读TikTok对社交媒体的影响&…

支持下载和阅读的漫画管理工具Teemii

什么是 Teemii &#xff1f; Teemii 是一款专为狂热漫画读者设计的精简 Web 应用程序。它为阅读和管理漫画集提供了一个简单而高效的平台。主要功能包括跨平台访问、浏览器内阅读、强大的元数据聚合器以及馆藏自动更新。Teemii 是专为那些寻求更加个性化和自主的方法来管理漫画…

[Kubernetes]4. 借助腾讯云TKE快速创建Pod、Deployment、Service部署k8s项目

前面讲解了通过命令行方式来部署k8s项目,下面来讲讲通过腾讯云TKE来快速创建Pod、Deployment、Service部署k8s项目,云平台搭建Kubernetes可参考[Kubernetes]1.Kubernetes(K8S)介绍,基于腾讯云的K8S环境搭建集群以及裸机搭建K8S集群 一.通过腾讯云TKE创建集群 1.创建集群 参考上…

Kibana 自定义索引连接器告警

一、 创建索引 PUT ipu-cbs-warning-info{"settings" : {"number_of_shards" : 1},"mappings" : {"properties" : {"timestamp": {"type": "date"},"rule_id" : { "type" : "…

经纬度的作用

当我们在手机上使用导航软件或者在网上查找地址时&#xff0c;经常会发现一个选项&#xff0c;就是显示当前位置的经纬度。那么&#xff0c;什么是经纬度&#xff0c;它有什么作用呢&#xff1f; 经纬度是用来确定地球上任何一个点位置的坐标系统。它由两个数值组成&#xff0…

spring常用注解(一)springbean生命周期类

一、PostConstruct&#xff1a; 被PostConstruct修饰的方法会在服务器加载Servlet的时候运行&#xff0c;并且只会被服务器调用一次&#xff0c;类似于servlet的inti()方法。被PostConstruct修饰的方法会在构造函数之后&#xff0c;init()方法之前运行。

网站内链和外链接的作用分析

一、浅谈内链与分析内链的作用 大家都知道网站内容的重要性&#xff0c;但很多站长还是停留在只更新网站内容等程度上。却忽视了做网站内链的作用。   网站内链的目的是为了更好的让搜索引擎抓取网站的内容&#xff01;和突出网站关键字的特点&#xff01;还有就是文章关键…

tomcat、java、maven

JDK&#xff5c;JRE Tomcat官网介绍的更清楚 Java 环境安装 安装 wget https://builds.openlogic.com/downloadJDK/openlogic-openjdk/8u392-b08/openlogic-openjdk-8u392-b08-linux-x64.tar.gz tar -xf openlogic-openjdk-8u392-b08-linux-x64.tar.gz mv openlogic-openjdk…