react+koa实现图片上传功能

2024年1月16日 156次阅读来源: Freya0608

技术栈

koa2 + react16.8
github 地址链接

项目步骤

前端开发

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>
    <input
        accept="image/*"
        className={classes.input}
        id="contained-button-file"
        multiple
        type="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实现

router.post('/upload',  async(ctx, next) => { //提交图片接口
    var form = new multiparty.Form({uploadDir: './files/'});
    // 上传完成后处理
    form.parse(ctx.req, function(err, fields, files) {
    //fields里有前端append的参数
        if (err) {
            throw err;
        } else {
            //form.append ()的值在fields中
            processImg(ctx.req, ctx.res, files,fields).then(function(data) {
                console.log('hshsh')
                // 设置跨域
                // allowCross(ctx);
                // res.json({
                //     res: JSON.parse(data.filesTmp),
                //     relPath: data.relPath,
                // })
            }).catch(function(err) {
                console.log(err)
            });
        }
    });

});

function processImg(req, res, files,fields) {
    return new Promise(function(resolve, reject) {
        const _img = files.filedata[0];
        const uploadedPath = _img.path;
        const originalFilename = _img.originalFilename;
        let dstPath = './imgs/'+ originalFilename;
        // console.log('dstPath',dstPath);
        //  (目前的路径，重命名后的路径)重命名
        fs.rename(uploadedPath, dstPath, function(err) {
            if (err) {
                reject(err)
            } else {
                console.log('rename ok!');
            }
        });
    });
}

总结

前端：
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后的文件同后端链接起来

    原文作者：Freya0608
    原文地址: https://segmentfault.com/a/1190000015970006
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

技术栈

项目步骤

前端开发

后端开发

总结