同步表单提交和异步表单提交以及提交前的预览
一、传统表单提交（同步上传）
先来复习一下 form 表单提交上传文件：
上传文件时表单必须加：
encType = "multipart/form-data"。且提交方式也必须为post 请求。enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
文章图片
encType = "multipart/form-data 这个方法提交的表单是同步的提交，因为提交完成还会进行页面跳转。体验不好故不用
文章图片
传统form表单提交.gif
根据提交返回的结果，查看提交的图片：
文章图片
查看图片
其中
二、虚拟表单提交（异步上传） 因为传文件只能表单上传，不能简单的放个 input 就上传文件，所以异步就是通过创建虚拟表单来提交数据。
下面来进行创建：
{/*图片预览*/}
{
this.state.filename === "" ?
null : 
文章图片
单个文件详细信息
axios 进行 post 请求的时候，文件格式这样的：
axios.post('url, {
dataName: 'data'
})
也可以对第一个括号里面的数据进行整合下写成下面这样推荐使用：
axios({
method: 'post',
url: 'http://192.168.2.250/uppic',
data: vform,
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}
})
axios 上传进度条提示格式代码：
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
}
控制台打印出这个 progressEvent 形参，有两个很重要的参数，我们上传的进度就可以使用 loaded/total 来表示。
文章图片
现在来完成异步上传组件：
import React, { Component } from 'react';
import { Progress } from 'antd';
import axios from "axios";
export default class S1 extends Component {
constructor(){
super();
this.state = {
filename : "",
progress : 0
}
}
render() {
return (
{/*原型进度条*/}【同步表单提交和异步表单提交以及提交前的预览】{/*上传完图片预览*/}
{
this.state.filename === "" ?
null : 
文章图片
是不很别扭，图片应该是上传前预览呀。
三、HTML5 把图片地址转成 base64
HTML5 把图片地址转成 base64，HTML5 新特性，用来做图片上传前的预览。
核心代码：
{
let file = e.target.files[0];
// HTML的新特性可以把图片变成base64地址
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = (_e)=>{
this.setState({
base64 : _e.target.result
})
}
}}/>
文章图片
上传前预览
完整代码示例：
import React, { Component } from 'react';
import { Progress , Icon} from 'antd';
import classnames from "classnames";
import axios from "axios";
export default class S1 extends Component {
constructor(){
super();
this.state = {
base64 : "",
progress : 0
}
}
render() {
return ({
let file = e.target.files[0];
// HTML的新特性可以把图片变成base64地址
let fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = (_e)=>{
this.setState({
base64 : _e.target.result
})
}
}}/>
{/*上传之前图片预览*/}{
this.state.base64 === "" ?
null : ![同步表单提交和异步表单提交以及提交前的预览]()
0 && this.state.progress < 100
})} src = https://www.it610.com/article/{this.state.base64} />
}{/*原型进度条*/}= 100
})} type="circle" strokeColor = "primary" percent={this.state.progress} width = {150} />)
}
}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Spectrum|Spectrum 区块偶尔停止同步问题排查与解决笔记
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- MYSQL主从同步的实现
- Hadoop|Hadoop MapReduce Job提交后的交互日志
- React.js的表单(六)
- git|git 的常规操作
- @逆战千锋|@逆战千锋 为什么sql语句执行之后表单中没有数据
- #8.17号小作业提交#
- 拆书带给我的变化
- 区块链P2P节点同步流程