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 提升运行速度之循环篇 译文
Aug 15 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
网络传输协议(http协议)
Nov 18 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
JS模态窗口返回值兼容问题的完美解决方法
2016/05/28 Javascript
浅谈js数组和splice的用法
2016/12/04 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
Python json模块使用实例
2015/04/11 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python中的字符串替换操作示例
2016/06/27 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
什么是python的自省
2020/06/21 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
关于python中remove的一些坑小结
2021/01/04 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
《法国号》教学反思
2016/02/22 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
postgreSQL数据库基础知识介绍
2022/04/12 PostgreSQL