vue+element-ui+axios实现图片上传


Posted in Javascript onAugust 20, 2019

本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href=https://unpkg.com/element-ui/lib/theme-chalk/index.css >
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
 <div id="app">
  <el-upload
   :action="posterUrl"
   :before-upload="beforeUpload"
   :http-request="(params)=>uploadImage(params)"
   :on-remove="(file, fileList)=>removeImage(file, fileList)"
   list-type="picture"
   accept="image/*"
  >
   <el-button size="small">选择图片</el-button>
  </el-upload>
 </div>
 
<script type="text/javascript">
 new Vue({
  el: '#app',
  data: {
   posterUrl: '',
   imgUrls: [],
   imgWidth: '320',
   imgHeight: '400',
  },
  methods: {
   beforeUpload(file) {
    let _this = this;
    let _checkSize = false; //是否需要指定上传图片的尺寸
    if(file.size > 1024*500) { //大小超过500kb
     _this.$message.error('图片太大,请重新选择');
     return false;
    }
    const isSize = new Promise((resolve, reject)=>{
     let _URL = window.URL || window.webkitURL;
     let img = new Image();
     img.onload = function () {
      if(!_checkSize || (_checkSize && img.width==_this.imgWidth && img.height==_this.imgHeight)) {
       resolve();
      }
      else {
       reject();
      }
     }
     img.src = _URL.createObjectURL(file);
    }).then(()=>{
     return file;
    }, ()=>{
     _this.$message.error('图片尺寸不对,请重新选择');
     return Promise.reject();
    });
    return isSize;
   },
 
   uploadImage(params) {
    console.log(params);
    let uploadData = new FormData();
    uploadData.append('file', params.file);
    let config = {
     headers: {
      'Content-Type': 'multipart/form-data'
     }
    };
    this.uploadPoster('homed'+new Date().getTime()+'/'+params.file.name, uploadData, config)
    .then(res=>{
     if(res.status == 200) {
      params.onSuccess();
      this.imgUrls.push({name:params.file.name, url:res.data.url});
      console.log(this.imgUrls);
     }
    }).catch(error=>{
     params.onError();
     this.$message.error('上传失败');
    });
   },
 
   removeImage(file, fileList) {
    console.log(fileList);
   },
 
   uploadPoster(url, obj, config) {
    let poster_upload_path = "http://xxxxxxxxxxxx/httpdocsup/poster/news/";
    return axios.post(poster_upload_path+url, obj, config);
   }
  }
 })
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
js循环改变div颜色具体方法
Jun 25 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue element upload实现图片本地预览
Aug 20 #Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 #Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 #Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 #Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 #Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
php数字游戏 计算24算法
2012/06/10 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
2015/03/13 Javascript
JavaScript多图片上传案例
2015/09/28 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
2017/05/10 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
详解Python编程中time模块的使用
2015/11/20 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python 获取网页编码方式实现代码
2017/03/11 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
经典优秀个人求职自荐信格式
2013/09/25 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
环境整治工作方案
2014/05/18 职场文书
大学生村官考核材料
2014/05/23 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
三方股东合作协议书
2014/10/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书