vue 使用lodash实现对象数组深拷贝操作

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

1. <template>
2. <div></div>
3. </template>
4.  
5. <script>
6. export default {
7. mounted() {
8. this.init();
9. },
10. methods: {
11. init() {
12. let lodash = require('lodash');
13. let obj1 = {
14. a: 1,
15. b: { f: { g: 1 } },
16. c: [1, 2, 3],
17. h: () => {
18. return 123;
19. },
20. k: undefined
21. };
22. let obj2 = lodash.cloneDeep(obj1);
23. obj2.b.f.g = 2;
24. obj2.c = [1, 2];
25. obj2.h = 1;
26. console.log(obj1);
27. console.log(obj2);
28. }
29. }
30. };
31. </script>

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

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

前言

基于iview的上传组件（Upload）以及进度条组件（Progress）

思路

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

完整示例

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

1. <template>
2. <Form :model="formData" :label-width="80">
3. <FormItem class="upload" label="上传文件">
4. <Upload
5. :before-upload="handleUpload"
6. :action="''"
7. :multiple="true"
8. >
9. <Button icon="ios-cloud-upload-outline">请选择附件</Button>
10. </Upload>
11. <!-- 进度条 -->
12. <Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" />
13. <!-- 显示列表 -->
14. <ul>
15. <li
16. v-for="(item, index) of formData.dispalyFile"
17. :key="index"
18. >
19. <span>{{ item.name }}</span>
20. <Icon type="md-close" @click="handleRemove(index)" />
21. </li>
22. </ul>
23. </FormItem>
24. </Form>
25. </template>
26.  
27. <script>
28. import axios from 'axios';
29. export default {
30. data() {
31. return {
32. formData: {
33. dispalyFile: [] // 临时数组，同时用于显示在页面
34. },
35. // 上传配置
36. upload: {
37. look: true, // 控制多文件上传，只触发一次ajax请求
38. fileProgressShow: false, // 进度条
39. fileProgress: 0 // 进度条进度
40. }
41. };
42. },
43. methods: {
44. handleUpload(selectFile) {
45. // 临时数组，同时用于显示在页面
46. this.formData.dispalyFile.push(selectFile)
47. // 控制多文件上传，只触发一次ajax请求
48. if (this.upload.look) {
49. this.upload.look = false;
50. // 延迟请求，等待所有文件都从本地读取完毕
51. setTimeout(() => {
52. let formData = new FormData();
53. this.formData.dispalyFile.map(item => {
54. // files为后台接收参数
55. // []为多文件数组
56. formData.append('files[]', item);
57. })
58. axios.request({
59. url: '/upload',
60. method: 'post',
61. data: formData,
62. headers: { 'Content-Type': 'multipart/form-data' },
63. onUploadProgress: (progressEvent) => {
64. // 用于上传过程中显示进度条
65. if (progressEvent.lengthComputable) {
66. // 显示进度条
67. this.upload.fileProgressShow = true;
68. // 计算当前进度
69. let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
70. // 赋值给进度条组件
71. this.upload.fileProgress = parseInt(curValue);
72. }
73. }
74. })
75. .then(res => {
76. // 上传成功处理
77. // 隐藏进度条
78. this.upload.fileProgressShow = false;
79. })
80. .catch(() => {
81. // 上传失败处理
82. // 隐藏进度条
83. this.upload.fileProgressShow = false;
84. })
85. }, 50);
86. }
87. return false;
88. }
89. }
90. };
91. </script>
92.  
93. <style scoped>
94. .upload {
95. width: 40%;
96. }
97. </style>

效果图

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

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

原文链接：https://blog.csdn.net/weixin_43233914/article/details/103035185