使用七牛云和element上传图片

一、创建element图片上传组件

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>

二、注册七牛云账号，并获取域名

一切准备就绪以后我么就可以在element组件上进行操作了，首先我们找到我们的储存区域，我们进入这里来查询你所要用的地区地址。然后我们将地区地址写入到

<el-upload
 action="地址写到这儿个地方"
 list-type="picture-card"
 :on-preview="handlePictureCardPreview"
 :on-remove="handleRemove">
 <i class="el-icon-plus"></i>
</el-upload>

然后我们调用uplaod的回调函数：before-upload来对我们获取到的文件进行处理，给自己的文件添加唯一标识，保存住。然后我们使用成功回调，获取到请求后七牛云返回回来的图片名字，我们将名字和之前我们获取的域名进行拼接获得图片地址，然后我们将地址传给后台保存

<el-upload
  action="地址写到这儿个地方"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :on-remove="handleRemove"
  :before-uploda="beforeup"
  ：on-success="successed">
  <i class="el-icon-plus"></i>
</el-upload>
//方法
methods：{
beforeup（file,filelist）{
//这里给他加上了时间戳
 this.qiniuData.key = `upload_pic_${new Date().getTime()}_${file.name}`;
 
}
successed（res）{
	var imgurl=申请的域名+res.key
}
//接下来就是将你的imgurl传给后台
this.$axios.post(url,{参数名：imgurl})

三、等到需要请求数据的时候后台会返回给你图片的地址，你直接填入就行了。好了这就完成了。