使用Vue实现图片上传的三种方式-创新互联
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来。
创新互联主要从事网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务遂平,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面,有一些商品名称、信息等字段,还有需要上传商品轮播图的需求。
我们就以Vue、Element-ui,封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路。
1.云储存
常见的 七牛云,OSS(阿里云)等,这些云平台提供API接口,调用相应的接口,文件上传后会返回图片存储在服务器上的路径,前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
- 向后端发送请求,获取OSS配置数据
- 文件上传,调用OSS提供接口
- 文件上传完成,后的文件存储在服务器上的路径
- 将返回的路径存值到表单对象中
代码范例
我们以阿里的 OSS 服务来实现,们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传,仅仅使用他组件的样式,和其他上传前的相关钩子(控制图片大小,上传数量限制等)。
分享文章:使用Vue实现图片上传的三种方式-创新互联
网站路径:http://pwwzsj.com/article/poecd.html