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 相关文章推荐
event.srcElement 用法笔记e.target
Dec 18 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
DOM 事件流详解
Jan 20 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
BootStrap树状图显示功能
Nov 24 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 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
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
详解React路由传参方法汇总记录
2020/11/29 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Django实战之用户认证(用户登录与注销)
2018/07/16 Python
Python中extend和append的区别讲解
2019/01/24 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
考博专家推荐信模板
2013/12/02 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
公司2015年终工作总结
2015/05/26 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android