使用Vue实现图片上传的三种方式-创新互联

项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。

创新互联主要从事网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务遂平,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。

我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用框架实现的思路都差不多，本文主要聊聊实现思路。

1.云储存

常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。

主要步骤

1. 向后端发送请求，获取OSS配置数据
2. 文件上传，调用OSS提供接口
3. 文件上传完成，后的文件存储在服务器上的路径
4. 将返回的路径存值到表单对象中

代码范例

我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。

通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。

文章名称：使用Vue实现图片上传的三种方式-创新互联
网页路径：http://cdxtjz.com/article/poecd.html