vue中el-upload上传图片到七牛的示例代码

 更新时间:2018年10月19日 14:25:37   作者:baozisss  
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单,需要从后台获取七牛token上传图片到七牛,具体示例代码大家跟随小编一起学习吧

一、思路,从后台获取七牛token,上传图片到七牛,获取返回图片路径放入el-upload。

二、代码。

<el-input v-model="listVideoQuery.orgLogo" @change="orgLogoChange"></el-input>
  <el-col :span="10" class="mt10">
  <el-upload class="upload-demo" :file-list="fileList2" :action="domain" :before-upload="beforeAvatarUpload" :data="form"
  :on-remove="handleRemoveQrgLogo" :on-success="handleAvatarSuccess" list-type="picture" :limit="1" multiple>
  <el-button size="small" type="primary" @click="upPicName='orgLogo'">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
  </el-upload>
  </el-col>

export default {
 name: 'edit',
 data() {
 return {
 upPicName:'', //上传图片名字
 fileList1:[],
 form: {}, //上传到七牛的token 
 bucketQuery:{
  bucket: 'website-image' //这是我用来获取token传给后台的字段
 },
 domain: 'http://upload.qiniu.com', // 七牛云的上传地址
 qiniuaddr: 'pd6rnk9ck.bkt.clouddn.com' // 这是七牛云空间的外链默认域名
 }
 },
 methods: {
 // 上传图片规格
 beforeAvatarUpload (file) {
 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
 const isLt2M = file.size / 1024 / 1024 < 5
 if (!isJPG) {
  return this.$message.error('上传文件只能是 JPG或PNG 格式!')
 }
 if (!isLt2M) {
  return this.$message.error('上传图片大小不能超过 5MB!')
 }
 return upQiniu(this.bucketQuery).then(res => {
  this.form = {
  token:res.data
  }
 })
 },
 //图片改变及上传
 bannerPicChange(value) {
 this.fileList1 = []
 this.fileList1.push({
  name: value, 
  url: value
 }) 
 },
 handleBannerPicRemove(file, fileList) {
 this.fileList1 = []
 this.listVideoQuery.orgLogo= ''
 },
 handleAvatarSuccess(response) {
 if(this.upPicName =='orgLogo'){
  this.fileList1 = []
  this.fileList1.push({
  name: 'http://' + this.qiniuaddr + '/' + response.key, 
  url: 'http://' + this.qiniuaddr + '/' + response.key
  }) 
  this.listVideoQuery.orgLogo= 'http://' + this.qiniuaddr + '/' + response.key
 }
 this.$message({
  type: 'success',
  message: '上传成功!',
  duration: 2000
 }) 
 },
 }
 }

三、效果。

总结

以上所述是小编给大家介绍的vue中el-upload上传图片到七牛的示例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    vue3+vite自定义封装vue组件发布到npm包的全过程

    当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库,下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下
    2022-09-09
  • 详谈vue中router-link和传统a链接的区别

    详谈vue中router-link和传统a链接的区别

    这篇文章主要介绍了详谈vue中router-link和传统a链接的区别,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue路由切换时取消之前的所有请求操作

    vue路由切换时取消之前的所有请求操作

    这篇文章主要介绍了vue路由切换时取消之前的所有请求操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue3使用videojs播放m3u8格式视频教程

    vue3使用videojs播放m3u8格式视频教程

    m3u8是一种基于HTTP Live Streaming(HLS)文件视频格式,它主要是存放整个视频的基本信息和分片(Segment)组成,下面这篇文章主要给大家介绍了关于vue3使用videojs播放m3u8格式视频的相关资料,需要的朋友可以参考下
    2023-06-06
  • vue子组件使用自定义事件向父组件传递数据

    vue子组件使用自定义事件向父组件传递数据

    这篇文章主要介绍了vue子组件使用自定义事件向父组件传递数据的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • vue中实现可编辑table及其中加入下拉选项

    vue中实现可编辑table及其中加入下拉选项

    这篇文章主要介绍了vue中实现可编辑table及其中加入下拉选项,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue中利用prop进行父子通信时的注意事项总结

    vue中利用prop进行父子通信时的注意事项总结

    这篇文章主要给大家介绍了关于vue中利用prop进行父子通信时的注意事项,文中通过实例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • vue-cli中的图片资源存放位置详解

    vue-cli中的图片资源存放位置详解

    这篇文章主要介绍了vue-cli中的图片资源存放位置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue iview实现动态路由和权限验证功能

    vue iview实现动态路由和权限验证功能

    这篇文章主要介绍了vue iview实现动态路由和权限验证功能,动态路由控制分为两种:一种是将所有路由数据存储在本地文件中,另一种则是本地只存储基本路由,具体内容详情大家参考下此文
    2018-04-04
  • 详解Vue用cmd创建项目

    详解Vue用cmd创建项目

    在本篇内容里小编给大家整理了关于Vue用cmd创建项目的方法讲解,有兴趣的朋友们跟着学习下。
    2019-02-02

最新评论