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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
vue请求数据的三种方式
Mar 04 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
php实现建立多层级目录的方法
2014/07/19 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
FCK调用方法..
2006/12/21 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
Python网络爬虫实例讲解
2016/04/28 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
会计专业自荐信
2013/12/02 职场文书
高中生旷课检讨书
2014/10/08 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
法定代表人资格证明书
2015/06/18 职场文书
同学聚会感言一句话
2015/07/30 职场文书
员工考勤管理制度
2015/08/06 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers