本文主要是介绍react+koa实现图片上传功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
技术栈
koa2 + react16.8
github 地址[链接](https://github.com/freya0608/react-imgUpload.git)
项目步骤
- 前端开发
1.创建`react app`
`yarn create react-app my-app`
2.用`material-ui`编写页面，代码如下
<form action="/upload" method="post" encType="multipart/form-data" style={{width:'100%'}}><div><inputaccept="image/*"className={classes.input}id="contained-button-file"multipletype="file"onChange={uploadImg}/><label htmlFor="contained-button-file"><Button variant="contained"component="span"className={classes.button}>添加图片</Button></label><GridList cellHeight={100} className={classes.gridList} cols={3}>{/*{console.log('html',values.images&&values.images)}*/}{ values.images && values.images.map((item,index) => (<GridListTile key={index}cols={item.cols || 1}data-index = {index}><strong>{item.name}</strong><a href="javascript:void(0)"className="upload-delete"title="删除"data-index = {index}onClick={deleteImg}>删除{index}</a><br/><img src={item.thumb} /></GridListTile>))}</GridList></div></form>{values.images &&values.images.length ?<Button variant="contained"color="primary"style={{height:'40px',width:'20%'}}className={classes.margin}onClick={() => handleUpload()}>上传图片</Button>:''}
3.其中需要用的函数代码如下：
const classes = useStyles();const [values, setValues] = React.useState({age: '',images:[],uploadHistory:[],});function uploadImg(e) {e.preventDefault();let target = e.target;let files = target.files;let count = files.length;for (let i = 0; i < count; i++) {files[i].thumb = URL.createObjectURL(files[i])}// convert to array//Array.prototype.slice.call(arguments)能将具有length属性的对象(key值为数字)转成数组。// []是Array的示例，所以可以直接使用[].slice（）方法。files = Array.prototype.slice.call(files, 0);files = files.filter(function (file) {return /image/i.test(file.type)});setValues(oldValues => ({...oldValues,images: values.images.concat(files)}));}const deleteImg = (e) => {let index = e.target.getAttribute('data-index');let result = values.images.splice(index,1);setValues(oldValues => ({...oldValues,images: values.images}));};function handleUpload() {for (let i = 0, file; file = values.images[i]; i++) {((file) => {let xhr = new XMLHttpRequest();if (xhr.upload) {// 上传中console.log('上传中')xhr.upload.addEventListener("progress", (e) => {// handleProgress(file, e.loaded, e.total, i);}, false);// 文件上传成功或是失败xhr.onreadystatechange = (e) => {if (xhr.readyState == 4) {if (xhr.status == 200) {console.log('handleSuccess' ,file )// handleSuccess(file, xhr.responseText);// this.handleDeleteFile(file);if (!values.images.length) {//全部完毕handleComplete();console.log('全部上传完成！');}} else {handleFailure(file, xhr.responseText);console.log('上传出错！');}}};const form = new FormData();form.append("filedata", file);// 开始上传xhr.open("POST", "/upload", true);// xhr.setRequestHeader("FILENAME", file.name);console.log('form',form);xhr.send(form);}})(file)}}//当上传图片的时候，如果还需要从前端往后端传参数可以使用`form.append("filedata", file);`的方法
* ### 后端开发
1.koa搭建框架代码：
const Koa = require('koa');
const app = new Koa();
app.use(statics(path.join(__dirname,staticPath)
));
app.use(statics('.'));app.use(bodyParser());app.listen(9000); //后端接听9000端口
2.前端引入静态文件，这样react，build好的文件直接和后端链接起来
const statics = require('koa-static'); //使用koa-static
const staticPath = './build';
app.use(statics(path.join(__dirname,staticPath)
));
app.use(statics('.'));
3.get 和put 方法设置
app.use(async(ctx, next) => {await next();ctx.response.type = 'text/html';// ctx.response.body = '<h1>Hello,koa2222!</h1>';// console.log('ctx use',ctx.url,ctx.method);if(ctx.method === 'GET'){ //当请求时GET请求时ctx.body =ctx.response.body;}else if(ctx.url==='/' && ctx.method === 'POST'){ //当请求时POST请求时ctx.body=await parsePostData(ctx);}else{//其它请求显示404页面ctx.body='<h1>404!</h1>';}});function parsePostData( ctx ) {return new Promise((resolve, reject) => {try {let postdata = "";ctx.req.addListener('data', (data) => {postdata += data})ctx.req.addListener("end",function(){let parseData = parseQueryStr( postdata );resolve( parseData )})} catch ( err ) {reject(err)}})
}
function parseQueryStr( queryStr ) {let queryData = {};let queryStrList = queryStr.split('&');console.log( queryStrList );for ( let [ index, queryStr ] of queryStrList.entries() ) {let itemList = queryStr.split('=');queryData[ itemList[0] ] = decodeURIComponent(itemList[1])}return queryData
}
4.跨域设置
const cors = require('koa-cors');
app.use(cors());
5.图片上传api实现
## 总结
- 前端：
1.`material-ui`地址：https://material-ui.com/ 它是React组件，实现了谷歌Material Design设计规范。世界上最流行的React界面框架。
2.图片是file类型，需要转数组`Array.prototype.slice.call`；
3.当上传图片的时候，如果还需要从前端往后端传参数可以使用`form.append("filedata", file);`的方法
后端：
1.后端的`form.parse`方法的`fields`里有前端`append`的参数；
2.跨域使用`koa-cors`；
3.上传的图片名字不是图片本身的名字，可以`fs.rename`来重新命名
4.`get`和`put`方法需要区分，可以使用上文中的代码。
5.`koa-static`可以将react 中build后的文件同后端链接起来
这篇关于react+koa实现图片上传功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
