一、传统表单提交（同步上传）
先来复习一下 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 : 
}
console.log(this.refs.file.files[0])打印出的单个信息文件。
单个文件详细信息
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 = {this.state.base64} />
}
{/*原型进度条*/}
)
}
}