位置: 编程技术 - 正文

React+react-dropzone+node.js实现图片上传的示例代码

编辑：rootadmin

推荐整理分享React+react-dropzone+node.js实现图片上传的示例代码，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块，在这里就不依依介绍了。

第一步，配置tsconfig.js

2.配置webpack

3.react-dropzone

accept:表示图片的接受类型

onDrop代表图片加载以后触发

accepted:表示加载图片成功后相关信息，打印出来如下:

rejected：表示加载图片失败后，相关信息：

4.图片处理、上传

新建一个drop方法在触发onDrop后。

在这里我们使用base传递，所以我们需要把图片转成base，定义getBaseImage处理

最终返回的是处理后图片的地址，然后上传

5.node部分

router/index.js

./controller/uploadImg.js

拿到图片后先进行格式转换，然后将图片写入到本地，返回图片路径。

本文链接地址:https://www.jiuchutong.com/biancheng/380941.html 转载请保留说明！