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编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
用React Native制作一个简单的游戏引擎
May 27 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/02/27 无线电
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
在PHP中使用redis
2013/11/04 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
Vue实现简单分页器
2018/12/29 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
物业电工岗位职责
2013/11/20 职场文书
会计电算化专业毕业生自荐信
2013/12/20 职场文书
服务员自我评价
2014/01/25 职场文书
高二生物教学反思
2014/01/27 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
《赵州桥》教学反思
2016/02/17 职场文书