位置: 编程技术 - 正文
推荐整理分享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
拿到图片后先进行格式转换,然后将图片写入到本地,返回图片路径。
标签: React+react-dropzone+node.js实现图片上传的示例代码
本文链接地址:https://www.jiuchutong.com/biancheng/380941.html 转载请保留说明!友情链接: 武汉网站建设