Vue开发之封装上传文件组件与用法示例


Posted in Javascript onApril 25, 2019

本文实例讲述了Vue开发之封装上传文件组件与用法。分享给大家供大家参考,具体如下:

使用elementui的 el-upload插件实现图片上传组件

每个项目存在一定的特殊性,所以数据的处理会不同

Vue开发之封装上传文件组件与用法示例

pictureupload.vue:

<template>
  <div class="pictureupload">
    <el-upload
        :action="baseUrl + '/api/public/image'"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        name="img"
        :on-success="upLoadSuccess"
        :data="upLoadData"
        :headers="headers"
        :limit="limit">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import store from "@/store";
export default {
  props: {
    imgList: {
      type: Array,
      default: []
    }, // 父组件传递的图片列表
    limit: "" // 图片数量限制
  },
  data() {
    return {
      fileList: [],
      upLoadData: {
        img: ""
      },
      baseUrl: process.env.BASE_API,
      dialogVisible: false,
      dialogImageUrl: "",
      headers: {
        Authorization: store.getters.token_type + " " + store.getters.token
      } // 接口调用token
    };
  },
  watch: {
    // 监听imgList的变化: fileList要求的格式为[{url: img}],所以监听imgList变化后将其进行处理,赋值给fileList
    imgList: {
      handler(newValue, oldValue) {
        if(newValue.length === 0) {
          this.fileList = [];
          return;
        }
        for (let i = 0; i < newValue.length; i++) {
          if (oldValue[i] != newValue[i]) {
            this.fileList = [];
            newValue.forEach(el => {
              this.fileList.push({url: el})
            })
            return;
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 图片移除时处理数据
    handleRemove(file, fileList) {
      let item = [];
      fileList.forEach(el => {
        item.push(el.url);
      });
      this.$emit("removeimg", item);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 判断图片数量
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {},
    // 上传图片成功事件
    upLoadSuccess(response) {
      this.$emit("uploadimg", response.message);
      this.$message("上传成功",);
    }
  },
  mounted() {
    if (this.imgList.length != 0) {
      this.imgList.forEach(el => {
        this.fileList.push({ url: el });
      });
    }
  }
};
</script>

使用上传图片组件:

<pictureupload @uploadimg="uploadimg" :imgList="ruleForm.img" :limit="3" @removeimg="removeimg"></pictureupload>
removeimg(item) {
  this.ruleForm.img = item;
},
uploadimg(item) {
  this.ruleForm.img.push(item);
},

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
js原生方法被覆盖,从新赋值原生的方法
Jan 02 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue2.0自定义指令示例代码详解
Apr 25 #Javascript
Vue开发之封装分页组件与使用示例
Apr 25 #Javascript
Vue注册组件命名时不能用大写的原因浅析
Apr 25 #Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 #Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 #Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
You might like
php使用codebase生成随机数
2014/03/25 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
AngularJS 多指令Scope问题的解决
2018/10/25 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python封装对象实现时间效果
2020/04/23 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
Python中按键来获取指定的值
2019/03/02 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
ktv好的活动方案
2014/08/17 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
学术会议通知范文
2015/04/15 职场文书
python基础之错误和异常处理
2021/10/24 Python
解析MySQL索引的作用
2022/03/03 MySQL