‘壹’ Vue 上传图片到七牛云实用攻略
vue 一般采用element 的upload 上传图片/文件。
首先，设定参数
参考Element upload 文档
其次，如图所示，重点在于domain和qiniuaddr两个参数！ 参考 七牛云存储图片域名文档
然后 上传一定要先获取到七牛云token！我是采用axios post获取。
接着，把返回的 file.name赋值给 key
this.QiNiuYun.key = `name_${file.name}`;
如图 上传成功/错误处理 函数
大功告成！
补充：
1. this.uploadImageUrl 这个变量实际上是 图片真正的URL-----https地址！！！
2. 该方法是针对单图上传，如果想多图 将data 内的参数 limit：1 修改为需要的图片数量 ！！！
3. 注意！当后台需要你传递多张图片的url时，可采用 此方法！！！
//拼接 url
if(this.uploadImageList===''){
this.uploadImageList= this.uploadImageUrl;
}else{
this.uploadImageList=this.uploadImageList+';'+ this.uploadImageUrl;
}
‘贰’ vue页面传值能传图片吗
可以
1.云储存
常见的 七牛云，OSS（阿里云）等，这些云平台提供API接口，调用相应的接口，文件上传后会返回图片存储在服务器上的路径，前端获得这个路径保存下来提交给后端即可。此流程处理相对简单。
主要步骤
向后端发送请求，获取OSS配置数据
文件上传，调用OSS提供接口
文件上传完成，后的文件存储在服务器上的路径
将返回的路径存值到表单对象中
代码范例
我们以阿里的 OSS 服务来实现，们试着来封装一个OSS的图片上传组件。
通过element-ui的upLoad组件的 http-request 参数来自定义我们的文件上传，仅仅使用他组件的样式，和其他上传前的相关钩子（控制图片大小，上传数量限制等）。
‘叁’ vue点击上传图片，vue上传oss，vue-cropper图片裁剪功能
很多刚入门的小伙伴上传图片都会使用现成的框架，然后根据框架提供的api进行上传，感觉这样是最简单的，其实上传图片是一个很简单的功能，
1.将input的设为透明然后定位到按钮上面，通过点击实现上传
2.点击按钮，通过处发input的点击事件后处发change，达到唤起上传图片的效果
先通过npm安装oss依赖
oss官方文档
1.前端拿到 accessKeyId，accessKeySecret直接上传oss
这种用法会直接暴露id及secret，相当于把自己家门的钥匙告诉别人，不推荐使用
2.通过后台转换，拿到对应的参数，进行上传
图片裁剪的插件，先通过npm安装依赖
vue-cropper 高版本解决在ios上图片拍照旋转问题
父组件
子组件，在项目components文件中新建一个cropper文件，在父组件中引入