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 相关文章推荐
JavaScript 新手24条实用建议[TUTS+]
Jun 21 Javascript
javascript call方法使用说明
Jan 11 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
如何为vuex实现带参数的 getter和state.commit
Jan 04 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
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的5个入手程序
2006/11/23 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php格式化电话号码的方法
2015/04/24 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Python实现去除代码前行号的方法
2015/03/10 Python
Python的Django框架使用入门指引
2015/04/15 Python
Python实现队列的方法
2015/05/26 Python
python占位符输入方式实例
2019/05/27 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
canvas使用注意点总结
2013/07/19 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
实训报告范文大全
2014/11/04 职场文书
2014年公司工作总结
2014/11/22 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
初一英语教学反思
2016/02/15 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书