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 相关文章推荐
js操作iframe父子窗体示例
May 22 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
jQuery实现图片轮播效果代码
Sep 27 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
微信小程序实现文件预览
Oct 22 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
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
2015/12/30 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
关于赌博的检讨书
2014/01/24 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
安全守法证明
2015/06/23 职场文书
公司规章制度范本
2015/08/03 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android