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 相关文章推荐
javascript数组的使用
Mar 28 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
vue forEach循环数组拿到自己想要的数据方法
Sep 21 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
js中switch语句的学习笔记
Mar 25 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
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
一次编写,随处运行
2006/10/09 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php简单实现MVC
2015/02/05 PHP
Cygwin中安装PHP方法步骤
2015/07/04 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
JavaScript File分段上传
2016/03/10 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
用python解压分析jar包实例
2020/01/16 Python
Django REST 异常处理详解
2020/07/15 Python
python 进程池pool使用详解
2020/10/15 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
高中生自我评语大全
2014/01/19 职场文书
法学求职信
2014/06/22 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
15个值得收藏的JavaScript函数
2021/09/15 Javascript
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python