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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 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的特殊设置
2006/10/09 PHP
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
laravel自定义分页效果
2017/07/23 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
js获取客户端外网ip的简单实例
2013/11/21 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
2019/11/05 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
Python 用户登录验证的小例子
2013/03/06 Python
分享python数据统计的一些小技巧
2016/07/21 Python
django中forms组件的使用与注意
2019/07/08 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Opencv求取连通区域重心实例
2020/06/04 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
文秘专业个人求职信
2013/12/22 职场文书
2015年检验科工作总结
2015/04/27 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书