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

上传组件封装需求分析

在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息。加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑。

upload.vue解析

upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:none。否则将将无法触发input的change事件

upload.vue代码如下:

<template>
 <div>
 <div class="upload-box" :style="imgStyle">
  <!-- 用户改变图片按钮的点击 触发上传图片事件 -->
  <input type="file" :ref="imgType$1"  @change="upload(formVal$1,imgType$1)" class="upload-input" />
  <!-- img 的 src 用于渲染一个 图片路径 传入图片路径 渲染出图片 -->
  <img :src="formVal$1[imgType$1]?formVal$1[imgType$1]:'static/img/upload.jpg'" />
 </div>
 </div>
</template>
<script>
/*
 该组件因为要上传多个属性的图片 主图(mainImg) 详细图(detailImg) 规格图 (plusImg)
 该组件基于压缩插件lrz,所以下方打入该组件
 npm install lrz --save 即可
*/
import lrz from 'lrz';
export default {
  name: 'uploadImg', //组件名字
  props: {
    formVal: {
      type: Object, //props接受对象类型数据(表单对象也可以是纯对象类型)
      required: true,
      default: {}
    },
    imgType: {        //表单对象中的图片属性 example:mainImg
      type: String,
      required: true,
      default: ''
    },
    imgStyle: {
      type: Object,    // 用于显示的图片的样式
      required: true //必须传递
    }
  },
  created: function() {
    //生命周期函数
  },
  data: function() {
   /*
     因为该组件需要改变父组件传递过来的值,
     所以将起拷贝一份
   */
    let formVal$1 = this.formVal;
    let imgType$1 = this.imgType;
    return {
      formVal$1,
      imgType$1,
      uploadUrl: url,//你的服务器url地址
    };
  },
  methods: {
    upload: function(formVal, imgType) {
      var self = this;
      //图片上传加载我们在这里加入提示,下方需要主动关闭,防止页面卡死
      var loadingInstance = this.$loading({
        text: '上传中'
      });
      var that = this.$refs[imgType].files[0]; //文件压缩file
      //图片上传路径
      var testUrl = this.uploadUrl; //图片上传路径
      try {
        //lrz用法和上一个一样也是一个压缩插件来的
        lrz(that)
          .then(function(message) {
            var formData = message.formData; //压缩之后我们拿到相应的formData上传
            self.$axios
              .post(testUrl, formData)
              .then(function(res) {
                console.log(res);
                if (res && res.data.iRet == 0) {
                  formVal[imgType] = res.data.objData.sUrl;
                  //上传成功之后清掉数据防止下次传相同图片的时候不触发change事件
                  self.$refs[imgType].value = '';
                  /*
                   这里因为使用elementUI中的表单验证,
                   当上传图片完成之后还会提示没有上传图片
                   所以需要通知父组件清除该验证标记
                   */
                  self.$emit('clearValidate', imgType);
                  self.$nextTick(() => {
                    // 以服务的方式调用的 Loading 需要异步关闭
                    loadingInstance.close();
                  });
                } else {
                  throw res.data.sMsg;
                }
              })
              .catch(function(err) {
                self.$nextTick(() => {
                  // 以服务的方式调用的 Loading 需要异步关闭
                  loadingInstance.close();
                });
                //接口报错弹出提示
                alert(err);
              });
          })
          .catch(function(err) {
            self.$nextTick(() => {
              loadingInstance.close();
            });
          });
      } catch (e) {
        //关闭加载动画实例
        self.$nextTick(() => {
          loadingInstance.close();
        });
      }
    }
  },
  mounted: function() {},
  watch: {
    /*
    这里需要注意当父组件上传一个图片然后通过重置按钮重置的时候.
     我们需要监听一下,防止上传同一张图片上传失败
    */
    formVal: {
      handle: function(newVal, oldVal) {
        var imgType = this.imgType;
        if (newVal[imgType] == '') {
          //这里使用了原生js写法当然也可以通过ref引用找到,后者更好
          document.getElementsByClassName('upload-input')[0].value = '';
        }
      }
    }
  }
};
</script>
<style scoped>
/*
 这里是默认的设置图片的尺寸。可以通过父组件传值将其覆盖
*/
.upload-box {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}

.upload-box img {
  width: 100%;
  height: 100%;
}

.upload-box .upload-input {
  position: absolute;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
</style>

商品页中使用upload组件

good.vue中我们引入upload组件。并且传递相应表单对象,需上传的图片类型的属性,以及图片显示样式给子组件

good.vue核心代码:

<template>
  <el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
  <!-- 无关代码略 -->
  <el-form-item label="详情图" prop="sDetailImg" ref="sDetailImg">
   <uploadImg :form-val="form" :img-type="'sDetailImg'" :img-style="detailImgStl" @clearValidate="clearValidate"></uploadImg>
  </el-form-item>
  <el-form-item>
   <el-row style="text-align:center;">
   <el-button type="primary" size="medium" @click.stop="submit('form')" v-if="!form.ID">保存</el-button>
   <el-button type="primary" size="medium" @click.stop="submit('form')" v-else-if="form.ID">修改</el-button>
   <el-button size="medium" @click.stop="resetForm('form')">重置</el-button>
   </el-row>
  </el-form-item>
  </el-form>
  <!-- 略 -->
</template>
<script>
  import uploadImg from "../common/uploadImg"; //图片上传
  export default {
  name: "good", //组件名字用户缓存
  data: function() {
   return {
   form: {
    ID: NULL,
    //其他字段略
    sDetailImg: "" //商品详细图
   },
   detailImgStl: {
    width: "350px",
    height: "150px"
   },
   rules: {
    sDetailImg: [{
    required: true,
    message: "请填写详细图信息",
    trigger: "change"
    }],
   }
   }
  },
  methods: {
   //这里监听子组件回写的信息,用户清除上传成功之后还显示图片未上传的bug
   clearValidate: function(imgName) {
   //清空图片上传成功提示图片没有上传的验证字段
   this.$refs[imgName].clearValidate();
   },
   //重置表单
   resetForm: function(formName) {
   this.confirm("确认重置表单", function(self) {
    self.$refs[formName].resetFields();
   })

   }
  },
  }
</script>

写在最后

关于图片上传之前我也写过一个小程序版本,总体看来pc端的图片上传相对于小程序 要复杂一点,这个封装只能满足当下单图上传的需求也有他的不足之处。当然也可以扩展为多图上传,关于多图上传的网上也有很多例子。这里不再一一赘述。

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

时间: 2019-08-19

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言 三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期

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

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

基于vue-upload-component封装一个图片上传组件的示例

需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要

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

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

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

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

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实现图片上传的三种方式

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

基于vue+ bootstrap实现图片上传图片展示功能

效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

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

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

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

java使用CKEditor实现图片上传功能

java如何使用CKEditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的CKEditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预览框中文本内容,并修改hidden属性值为显示上传选项卡 删除image.js中包含在双引号中的上述文本 将image.js中的hidden属性值改为0 3.修改ckeditor/config.js文件,配置"上传到服务器"按钮调用的controller接口 4."上传到服务器&

微信小程序基于腾讯云对象存储的图片上传功能

在使用腾讯云对象存储之前,公司一直使用的是传统的FTP的上传模式,而随着用户量的不断增加,FTP所暴露出来的问题也越来越多,1.传输效率低,上传速度慢.2.时常有上传其他文件来攻击服务器,安全上得不到保障.所以我们在经过慎重考虑觉得使用第三方的云存储服务. 在最开始的时候我们在腾讯云与阿里云中选择,最终我们选择腾讯云,腾讯云在文件上传用时方面的性能比较突出,文件越大表现越好:在下载用时方面表现略优于阿里云:文件删除用时方面总体速度略逊于,但在不同大小文件删除用时上都比较稳定.当然这与我们主要用于

vue中利用simplemde实现markdown编辑器(增加图片上传功能)

前言 最近在搭个人博客网站,需要一个 markdown 编辑器,来进行博客的编写 看了网上的教程,决定使用 simplemde 以为可以直接能拿来用的 不过实际运用的时候发现还是有要完善的地方 比如令人头疼的图片上传 最终效果 安装及初始化 npm install simplemde --save 在html中加入一个textarea <textarea id="simplemde"></textarea> 在vue的生命周期函数 mounted 中,添加 si

Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

iOS实现压缩图片上传功能

本文实例为大家分享了iOS实现压缩图片上传功能,供大家参考,具体内容如下 #pragma mark - 打开相机 -(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{ UIImage *image = info[UIImagePickerControllerOriginalImage]; s

JS实现图片上传预览功能

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> </head> <body&g

使用express+multer实现node中的图片上传功能

下文给大家介绍使用express+multer实现node中的图片上传功能,具体内容介绍如下所示: 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在node中使用multer中间件来对上传路由接口进行处理 multer文档 package.json html部分 <body> <div class="form-group"> <label>File input