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 String 的扩展方法集合
Jun 01 Javascript
js 判断 enter 事件
Feb 12 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
判断访客终端类型集锦
Jun 05 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
ES6函数实现排它两种写法解析
May 13 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php银联网页支付实现方法
2015/03/04 PHP
sina的lightbox效果。
2007/01/09 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
Angular中的$watch方法详解
2017/09/18 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
python基于phantomjs实现导入图片
2016/05/13 Python
Python中查看文件名和文件路径
2017/03/31 Python
django站点管理详解
2017/12/12 Python
python实现ID3决策树算法
2017/12/20 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
python中pivot()函数基础知识点
2021/01/03 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
EJB的基本架构
2016/09/22 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
安全生产投入制度
2014/01/29 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
服务承诺书格式
2014/05/21 职场文书
北京申奥口号
2014/06/19 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
励志演讲稿大全
2014/08/21 职场文书