2021-03-23 - 前端 - 文件上传 - 学习/实践

我会带着你远行 2022-11-12 09:54 168阅读 0赞

1.应用场景

<table> 
 <tbody> 
  <tr> 
   <td>主要用于前端上传文件, 如: 图片等.</td> 
  </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
  <tr> 
   <td> <p>要实现图片上传的效果:</p> <p><img alt="" height="299" src="https://img-blog.csdnimg.cn/20210323182156987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="720"></p> <p>&nbsp;</p> <p>参考:</p> <p>现有系统的做法, 如下:&nbsp;</p> <p>&nbsp;<img alt="" height="225" src="https://img-blog.csdnimg.cn/20210323183128905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="836"></p> <p>&nbsp;</p> <p>删除 input元素中的 style="display: none;" tabindex="-1"</p> <p>界面上变成:</p> <p><img alt="" height="266" src="https://img-blog.csdnimg.cn/20210323182931194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="393"></p> <p>寻找公司主题组件的是否有文件上传的组件, 目前没有找到[确实没有]</p> <p>目前完成功能, 可以采用两种方式,&nbsp;</p> <p>1.使用目前已有的react 第三方库, 如:&nbsp;<a href="https://github.com/ningxiaofa/react-dropzone" rel="nofollow">https://github.com/ningxiaofa/react-dropzone</a>&nbsp;<span style="color:#f33b45;"> &nbsp;// 推荐</span></p> <p><a href="https://react-dropzone.js.org/#section-components" rel="nofollow">https://react-dropzone.js.org/#section-components</a>&nbsp; // 功能很强大</p> <p>&nbsp;</p> <p>2.自己写一个组件, 只是放在项目中使用.&nbsp;</p> <p>&nbsp;</p> <p>思考:</p> <p>如果在满足现有需求[UI样式]基础上, 优先考虑使用第三方组件库,&nbsp;</p> <p>否则, 采用方式2. 但是方式1明显要快, 方式2需要一些时间去学习, 实践,测试, 才可以放在项目中使用.</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>1.文档阅读</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file</a>&nbsp; //&nbsp;&lt;input type="file"&gt;</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications</a>&nbsp; //&nbsp;在web应用程序中使用文件</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>2.整理输出</p> <p>TBD</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p>后续补充</p> <p>...</p> </td> 
  </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file</a>&nbsp; //&nbsp;&lt;input type="file"&gt;</p> <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications" rel="nofollow">https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications</a>&nbsp; //&nbsp;在web应用程序中使用文件</p> </td> 
  </tr> 
 </tbody> 
</table>

后续补充

...