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


Posted in Javascript onOctober 19, 2018

一、思路,从后台获取七牛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上传图片到七牛的示例代码

总结

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

Javascript 相关文章推荐
Javascript remove 自定义数组删除方法
Oct 20 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
浅析vue-router原理
Oct 19 #Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 #Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 #Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 #Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 #Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 #Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
javascript中的this详解
2014/12/08 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
vue兄弟组件传递数据的实例
2018/09/06 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Python sys.argv用法实例
2015/05/28 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
应届生的求职推荐信范文
2013/11/30 职场文书
公益活动策划方案
2014/01/09 职场文书
初一科学教学反思
2014/01/27 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
《四季》教学反思
2014/04/08 职场文书
大学学习计划书范文
2014/05/02 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python