我就废话不多说了,大家还是直接看代码吧~

export default {

mounted() {

this.init();

},

methods: {

init() {

let lodash = require('lodash');

let obj1 = {

a: 1,

b: { f: { g: 1 } },

c: [1, 2, 3],

h: () => {

return 123;

},

k: undefined

};

let obj2 = lodash.cloneDeep(obj1);

obj2.b.f.g = 2;

obj2.c = [1, 2];

obj2.h = 1;

console.log(obj1);

console.log(obj2);

}

}

};

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

补充知识:vue iview上传多文件只发送一次ajax请求,并根据上传进度显示上传进度条

前言

基于iview的上传组件(Upload)以及进度条组件(Progress)

思路

使用Upload组件提供的上传文件之前的钩子,将所有上传文件拦截下来,保存在本地临时数组,使用axios来进行上传

完整示例

进度条部分,请上传一个大文件来查看效果

:before-upload="handleUpload"

:action="''"

:multiple="true"

>

请选择附件

  • v-for="(item, index) of formData.dispalyFile"

    :key="index"

    >

    {{ item.name }}

import axios from 'axios';

export default {

data() {

return {

formData: {

dispalyFile: [] // 临时数组,同时用于显示在页面

},

// 上传配置

upload: {

look: true, // 控制多文件上传,只触发一次ajax请求

fileProgressShow: false, // 进度条

fileProgress: 0 // 进度条进度

}

};

},

methods: {

handleUpload(selectFile) {

// 临时数组,同时用于显示在页面

this.formData.dispalyFile.push(selectFile)

// 控制多文件上传,只触发一次ajax请求

if (this.upload.look) {

this.upload.look = false;

// 延迟请求,等待所有文件都从本地读取完毕

setTimeout(() => {

let formData = new FormData();

this.formData.dispalyFile.map(item => {

// files为后台接收参数

// []为多文件数组

formData.append('files[]', item);

})

axios.request({

url: '/upload',

method: 'post',

data: formData,

headers: { 'Content-Type': 'multipart/form-data' },

onUploadProgress: (progressEvent) => {

// 用于上传过程中显示进度条

if (progressEvent.lengthComputable) {

// 显示进度条

this.upload.fileProgressShow = true;

// 计算当前进度

let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);

// 赋值给进度条组件

this.upload.fileProgress = parseInt(curValue);

}

}

})

.then(res => {

// 上传成功处理

// 隐藏进度条

this.upload.fileProgressShow = false;

})

.catch(() => {

// 上传失败处理

// 隐藏进度条

this.upload.fileProgressShow = false;

})

}, 50);

}

return false;

}

}

};

.upload {

width: 40%;

}

效果图

上传多文件,只进行了一次ajax请求,这里xlz是一个超大压缩包,用于展示进度条效果, binary 为二进制文件

如果本篇文章对你有帮助的话,很高兴能够帮助上你。希望能给大家一个参考,也希望大家多多支持脚本之家。

vue 拷贝 数组_vue 使用lodash实现对象数组深拷贝操作相关推荐

  1. JQ数组筛选,去重,对象数组求和

    JQ数组筛选 var list = this.selArr.filter(x => x.checkedList.length > 0).map(x => ({county: x.na ...

  2. es6 数组找最大值_在对象数组中查找属性的最大值

    我正在寻找一种非常快速,干净且有效的方法来获取以下JSON切片中的最大" y"值: [ { "x": "8/11/2009", " ...

  3. java定义对象数组初始化_怎么定义对象数组 JAVA中怎么初始化对象数组?

    java类怎样定义数组对象数组 在c++编程中,怎么定义对象数组的指针? JAVA中怎么初始化对象数组? java中怎么创建对象数组?比如我创建了一个学生类Sclass Student{ } 类中怎么 ...

  4. vue 取数组第一个值_Vue如何循环提取对象数组中的值

    1.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res) = ...

  5. php遍历数组对象数组长度,PHP循环遍历对象数组会产生意外结果

    我有以下 PHP代码为每个帖子设置parentId. 每个数据的parentId都成为最后一个帖子ID. 我的逻辑出了什么问题? 顺便说一句,如果我把它改成数组,那么每一件事都可以.请帮忙! $dat ...

  6. java字符串数组拷贝函数_java 数组的拷贝 对象数组的拷贝 System.arraycopy函数

    /* java 数组的操作   System类的arraycopy静态函数用于数组拷贝   数组是不能越界的 对象数组的复制实际上是复制的引用的拷贝  也就是对象的地址 */ class Point ...

  7. java 数组的拷贝 对象数组的拷贝 System.arraycopy函数

    /* java 数组的操作   System类的arraycopy静态函数用于数组拷贝   数组是不能越界的 对象数组的复制实际上是复制的引用的拷贝  也就是对象的地址  */ class Point ...

  8. vue表单提交数组_ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  9. js 矩阵转置_js对象数组矩阵转置(行转列)的实践

    最近项目中有个需求需要将一个类似二维数组的数据矩阵转置(行转列)我通过查资料发现这是很简单的.只需要经过下面的处理就没问题了.但... var newArray = tansDatas[0].map( ...

最新文章

  1. Spring Boot 实现多图片上传并回显,涨姿势了~
  2. Mysql无限重启问题可能原因
  3. python免费试听-小栈春季编程免费试听课 倒数6天!
  4. qt4 与php 通讯,Qt与外部程序通信问题
  5. 阿里云——ECS——Linux服务器购买流程——超级细致
  6. Android里的shell的系统命令
  7. html js停止计时,用 js 写的计时器,暂停计时无法生效
  8. yum 安装nginx
  9. C#解leetcode 53.Maximum Subarray
  10. 【懒人有道】在asp.net core中实现程序集注入
  11. Asp.net can do Native Code also can do it(updated)
  12. JNI学习-- C调用java方法
  13. 用linux装逼-w3m
  14. 代码随想录动态规划算法PDF
  15. Python编写:好友管理系统
  16. linux光盘启动盘制作工具,Linux_最新万能 DOS 启动盘制作全攻略(软盘+光盘+U盘+硬盘+NTFS+应急实用工具),首先说明一下各种操作系统启 - phpStudy...
  17. c语言校时程序,我校C语言程序设计教与学的思考
  18. 计算机nemurt.dll,DDD~领域事件中使用分布式事务
  19. android音频驱动工程师,4.Android音频驱动(底层1)
  20. phpstrom安装,配置,激活教程,以及使用lanyu的激活码,报错1653219,解决办法

热门文章

  1. Vista,Windows7中给IIS7添加PHP支持
  2. Hadoop Ecosystem解决方案---数据仓库
  3. cuda安装配置VS2013
  4. BeanUtils包的使用
  5. mysql alter table_mysql ALTER TABLE 的用法
  6. CSS浏览器兼容性问题
  7. 教你如何创建一款属于自己的VSCode主题
  8. shell 删除七日内日志_shell日志删除(超容量自动)
  9. service层拼接XML
  10. 服务器维修天长,台达精密空调服务天长市供电局