本文摘要：图片/文件上传 组是企业项目开发中必不行少的环节之一, 但凡涉及到用户模块的都市有 图片/文件上传 需求, 在许多第三方组件库( ant desigin , element ui )中它也是基础组件之一. 接下来笔者就来带大家 从零实现一款图片/文件上传组件以及扩展出更强大的上传组件 . 你将收获 常用的图片上传功效实现方案 手写一个图片/文件上传组件 如何将 裁剪功效 集成到上传组件中 内容平台/可视化平台下的图片自治方案 如何扩展出更强大的图片上传方案 正文 作为一名

图片/文件上传组是企业项目开发中必不行少的环节之一, 但凡涉及到用户模块的都市有图片/文件上传需求, 在许多第三方组件库(ant desigin, element ui)中它也是基础组件之一. 接下来笔者就来带大家从零实现一款图片/文件上传组件以及扩展出更强大的上传组件.

你将收获

常用的图片上传功效实现方案 手写一个图片/文件上传组件 如何将裁剪功效集成到上传组件中 内容平台/可视化平台下的图片自治方案 如何扩展出更强大的图片上传方案

正文

作为一名前端工程师, 解决项目问题是我们的基本职责之一, 我们可以使用已掌握的知识去解决项目开发中的问题和需求, 这也是我们职业生涯必将履历的第一个阶段,即——适应期. 如果我们想继续提升, 我们就需要不停的打怪升级,掌握种种技术, 这样我们才气在未来遇到问题时接纳最佳的方案高效的解决问题, 也就是第二个阶段——生长期.

status: 'done',

1. 常用的图片上传方案

从web1.0时代开始, 我们用的最多的上传方案就是form表单, 我们只需要在form内写好种种input(输入型元素), 并界说好上传的服务器地址(action)即可.形式类似如下:

}

}

}

}

在XHR技术还没普实时, 我们大多会选择上述方案, 唯一的缺点就是提交之后会刷新页面, 用户体验不太好, 还可能造成局部数据丢失, 但仍然有解决方案, 就是form + iframe技术.

1.1 form + iframe方案

form + iframe方案的基本思路就是我们提交行动是在父页面触发, 可是form表单指向为iframe, 这样可以实现局部刷新, 现在有些场景仍然在使用该方案, 详细原理如下:

以上两种方案都可以实现传统form提交下的局部刷新功效, 不外方案一需要单独维护iframe表单, 所以我呢一般接纳方案二, 而且兼容性都可以到达IE9(虽然现在来说兼容IE浏览器意义不大, 可是还是要相识一下)

1.2 ajax + formData方案

在XHR盛行之后,我们可以轻松使用ajax来实现异步请求了, 对于文件上传, 我们也可以更灵活的使用ajax和formData来实现, 逐渐脱离了对原生form表单的依赖.

> FormData 工具用以将数据编译成键值对以便用来发送数据。其主要用于发送表单数据但亦可用于发送带键数据(keyed data)而独立于表单使用。如果表单enctype属性设为multipart/form-data 则会使用表单的submit()方法来发送数据从而发送数据具有同样形式。

);

以上案例中我们可以发现在用户上传图片的时候都市提供两个可选选项, 一个是当地上传, 一个是直接在图片库中选择, 所以我们的方案也类似, 可以统一将图片库封装到文件上传组件中作为通用功效, 也可以组合式封装, 各自。

本文关键词：BOB官方网站,基于,业务,场景,下,的,图片,文件,上传,方案

本文来源：BOB官方网站-www.wgysyl.com