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

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • Vue.js 2.0 移动端拍照压缩图片上传预览功能

    Vue.js 2.0 移动端拍照压缩图片上传预览功能

    在学习和使用Vue.js 2.0 的过程中遇到不少不一样的地方,本来移动端开发H5应用,准备将mui框架和Vue.js+vue-router+vuex 全家桶结合起来使用,但是在拍照上传的实现过程中遇到了无法调用plus的H5+接口的问题,所以最后拍照上传功能还是使用input file方式里解决的.但是内心还是不甘心的,由于项目进度推进,迭代版本,所以不得不放弃,后续可能我将此功能使用调用H5+接口实现. 首先我来讲我实现这个拍照预览压缩上传的思路,准确的说应该是拍照或选择图片压缩之后预览及上

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • vue-quill-editor实现图片上传功能

    问题描述   项目使用的vue2.0开发,项目中需要一个富文本编辑器,楼主经过一番心理挣扎选择了vue-quill-editor.具体如何引用作者在项目中已经写得很明白了,我在这里就不再赘述.   vue-quill-editor插入图片的方式是将图片转为base64再放入内容中,这样就会产生一个问题,如果图片比较大的话,富文本的内容就会很大,楼主是将内容存在数据库中的,这样一来,一方面会占用大量的数据库存储空间,另一方面当图片太大的时候富文本的内容,会超过数据库的存储上限,从而会产生内容被截断

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能

    本文实例为大家分享了Vue2.0实现调用摄像头进行拍照功能的具体代码,以及图片上传功能引用exif.js,供大家参考,具体内容如下 可以在github 上下载demo链接 vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backg

  • Vue + Element UI图片上传控件使用详解

    Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

随机推荐