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 相关文章推荐
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
extjs render 用法介绍
Sep 11 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
是否存在第一台收音机的说法
2021/03/01 无线电
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
js比较日期大小的方法
2015/05/12 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
深入浅析Python代码规范性检测
2020/07/31 Python
python的setattr函数实例用法
2020/12/16 Python
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
c语言常见笔试题总结
2016/09/05 面试题
linux面试题参考答案(3)
2012/09/13 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
大学生就业求职信
2014/06/12 职场文书
五好家庭申报材料
2014/12/20 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL