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 var变量隐式声明方法
Oct 19 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
Vue动态组件实例解析
Aug 20 Javascript
微信小程序实现评论功能
Nov 28 Javascript
vue中监听返回键问题
Aug 28 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 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
新52大事件
2020/03/03 欧美动漫
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
js date 格式化
2017/02/15 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
浅谈React高阶组件
2018/03/28 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
python代码实现ID3决策树算法
2017/12/20 Python
python list转矩阵的实例讲解
2018/08/04 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Django视图扩展类知识点详解
2019/10/25 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
护理专业的自荐信
2013/10/22 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
长城导游词300字
2015/01/30 职场文书
党小组推荐意见
2015/06/02 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python