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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Vue项目引发的「过滤器」使用教程
Mar 12 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
一个好用的分页函数
2006/11/16 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
DOM相关内容速查手册
2007/02/07 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue跨域解决方法
2017/10/15 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
python算法学习之基数排序实例
2013/12/18 Python
python如何实现一个刷网页小程序
2018/11/27 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python @property装饰器原理解析
2020/01/22 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
个人欠条范本
2015/07/03 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
个人售房合同协议书
2016/03/21 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python