js之base64上传图片

首先要搭建好springmvc,详见https://www.cnblogs.com/zzb-yp/p/9295397.html

整体思路:前端代码包括显示和传参(这里的参数主要就是图片的base64字符串),显示主体部分是type=“file”类型的input组件和一个提交按钮   

             后端接收传过来的图片的base64字符串,将其通过流的形式进行本地保存或者直接保存在数据库中

1、简单的两个组件file组件和button组件

image

file的onchange属性(在点击选择的文件并且与前一次的文件不相同时执行showImg()函数)

button的onclick属性(点击按钮后执行saves()函数)

2、showImg()函数

image

3、saves()函数        (注意注意,这里我有一个写错了,在下面第六行的multipart/form-data中,我在下面中间少了一个"-")

image

 

4、后端:解析传过来的参数+保存文件到本地

image

image

image

 

5、测试结果

      连接服务器

      

      点击选择文件,选择图片

      

      点击保存图片,查看保存在本地的上传图片

      

 

转载于:https://www.cnblogs.com/zzb-yp/p/9443534.html

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

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

相关文章

WPF 使用皮肤影响按钮自定义

在WPF项目中使用了 Theme的皮肤后,发现自定义的按钮全部都是 皮肤里面的样式,如下图: 要自定义样式,只有不给按钮使用皮肤样式。 如果想给某一个控件使用样式,在前端Xaml的控件中,设置一下属性即可&#xf…

树链剖分 讲解+模板+习题

今天我们来讲一下树链剖分 树链剖分是什么? 树链剖分是一种用来维护树上路径信息的在线方法,可以处理在线。 通常通过一种方法,将一棵树剖分成若干条链,然后通过数据结构(线段树,BIT等)去维护。…

navicat 批量插入 测试数据

1. 前言 遇到线上大sql执行较慢, 10s, 做优化改进时,首先想到的是在本地造出一个类似的库环境,先本地实验。 然后往表中创建大量数据... 2. 方案 利用mysql函数来插入大量数据 代码 BEGIN#Routine body goes here... DECLARE id int; DECLARE driverid …

36--斐波那契数列

1. 问题描述 写一个函数,输入n,求斐波那契(Fibonacci)数列的第 n 项。斐波那契数列的定义如下: F(0) 0, F(1) 1 F(N) F(N - 1) F(N - 2), 其中 N > 1. 斐波那契数列由 0 和 1 开始,之后的斐波那契数…

从拿到班车手册.xls到搜索附近班车地点

起因 七月份要去某厂报道了,异地租房的时候发现想租一个有公司班车的地方,却不知道哪里有班车。辗转流传出班车手册后发现搜索实在是太不方便了,于是有了一个主义,想做一个可以搜索房子地址,找出附近班车点&#xff08…

py 5.24

#面向对象 #类:模子。Person,不具体。 #实例/对象:依托于类产生的具体的带有属性的。alex #实例化:产生对象的过程。 alex Person() #类: #分为静态属性(一般的变量)。动态属性(函数&#xff0…

多线程原理实例应用详解

从单进程单线程到多进程多线程是操作系统发展的一种必然趋势,当年的DOS系统属于单任务操作系统,最优秀的程序员也只能通过驻留内存的方式实现所谓的"多任务",而如今的Win32操作系统却可以一边听音乐,一边编程&#xff0…

字符装换

2019独角兽企业重金招聘Python工程师标准>>> 字母大小写转换 a →A char toUpperCase( char ch){ if((ch >a) && (ch <z)){ return (char)(ch - 32); // 主要 这里(char)是必要的&#xff0c;因为char -32是返回的数值&#xff0c;必须转换成对应的字…

解决 Unable to translate SQLException with Error code ‘17059‘, will now try the fallback translator

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.报错&#xff1a; Unable to translate SQLException with Error code 17059, will now try the fallback translator 报错如下&…

杭电多校 Harvest of Apples 莫队

问题 B: Harvest of Apples 时间限制: 1 Sec 内存限制: 128 MB 提交: 78 解决: 35 [提交] [状态] [讨论版] [命题人:admin] 题目描述 There are n apples on a tree, numbered from 1 to n. Count the number of ways to pick at most m apples. 输入 The first line of the …

激活prompt

1.下载SQLPrompt 2. 断网&#xff0c; 打开注册机&#xff0c;拷贝验证码 2. 点击activate&#xff0c; 拷贝代码 转载于:https://www.cnblogs.com/zxhome/p/9459415.html

[转]自然语言处理中的Attention Model:是什么及为什么

自然语言处理中的Attention Model&#xff1a;是什么及为什么 https://blog.csdn.net/malefactor/article/details/50550211/* 版权声明&#xff1a;可以任意转载&#xff0c;转载时请标明文章原始出处和作者信息 .*/ author: 张俊林 要是关注深度学习在自然语言处理方面…

用gson得JSON,数值变为double类型 ,去掉double值中的小数位(3.0改为3)

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 项目中有个接口的数据是从缓存中读取再组成JSON 格式返出&#xff0c;原本缓存中数据是这样的&#xff1a; 用Gson 组成JSON 后&…

38--合并两个排序的链表

1.问题描述 输入两个递增排序的链表&#xff0c;合并这两个链表并使新链表中的节点仍然是递增排序的。 实例&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4 2.解决思路 /*** Definition for singly-linked lis…

39--打印从1到最大的n位数

1.题目描述 输入数字 n&#xff0c;按顺序打印出从 1 到最大的 n 位十进制数。比如输入 3&#xff0c;则打印出 1、2、3 一直到最大的 3 位数 999。 示例 1: 输入: n 1 输出: [1,2,3,4,5,6,7,8,9] 2.解题思路 class Solution {public int[] printNumbers(int n) {int end …

Python学习之路20-数据模型

《流畅的Python》笔记。本篇是Python进阶篇的开始。本篇主要是对Python特殊方法的概述。1. 前言 数据模型其实是对Python框架的描述&#xff0c;它规范了这门语言自身构件模块的接口&#xff0c;这些模块包括但不限于序列、迭代器、函数、类和上下文管理器。不管在哪种框架下写…