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 相关文章推荐
js计算精度问题小结
Apr 22 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
浅析JavaScript 调试方法和技巧
Oct 22 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
js实现幻灯片轮播图
Aug 14 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 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去除HTML标签实例
2013/11/06 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
js实现返回顶部效果
2017/03/10 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
Python实现合并字典的方法
2015/07/07 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python之消除前缀重命名的方法
2018/10/21 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
个人简历中的自我评价怎么写
2014/01/26 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
预备党员转正材料
2014/12/19 职场文书
面试通知邮件
2015/04/20 职场文书
公司联欢会主持词
2015/07/04 职场文书
Python 数据可视化之Seaborn详解
2021/11/02 Python