vue2.0+element-ui上传文件

目录

一、this不对

场景：

现象：

解决方案：

二、for循环key重复

场景：

现象：

解决方案：

三、element-ui上传组件 同一个图片的多次上传

场景：

现象：

解决方案：

四、for和while循环异步

场景：

现象：

解决方案：

五、使用字符串来调用方法

场景：

解决方案：

六、手动生成新的表单，删除自动生成的表单

场景：

效果：

解决方案：

七、element-ui上传组件使用代码演示

前端：

后端：

请求

八、后端获取的enums集合，前端显示变为List集合

场景：

现象：

解决方案：

添加注解

手动编写转换代码

---

一、this不对

场景：

在vue的“:for”循环的内部使用“element-ui”的上传组件，在上传组件的回调函数中，使用“this.XXX”来保存返回值

现象：

找不到对应的属性，回调函数中的“this”变为了“element-ui”的上传组件本身

解决方案：

将函数改为箭头函数，箭头函数的this永远指向VUE对象，还可以自定义添加入参

二、for循环key重复

场景：

有多个循环表单集合的组件，因为是新增的表单，没有id之类的主体键，所以决定使用for循环的“index”作为key

现象：

因为存在多个循环，而且都没有最优的key，导致使用了相同的key----"index"，vue会报错体型存储时会出问题

解决方案：

在“index”后拼接一些额外的字段

三、element-ui上传组件 同一个图片的多次上传

场景：

需要上传多组图片，而这些组中有一部分图片相同

现象：

一开始我每个上传组件的“file-list”使用的都是同一个集合，导致一个集合内存入了多个相同的图片（只看内容是否相同，不看文件名），提交上传400报错

解决方案：

每个上传组件都各自分配一个“file-list”互不干扰

四、for和while循环异步

场景：

多个图片上传后，将服务器上保存的文件名称保存到表单，全部图片上传并把文件名保存到表单后提交表单

现象：

一开始我使用标志位来判断，while中循环判断是否标志位符合条件，但是发现循环的时候根本不会上传图片，而是在循环结束后才开始上传

解决方案：

使用监听属性来调取方法

五、使用字符串来调用方法

场景：

循环时，调取的回调方法是一个拼接出来的方法名，即你写的时候不知道他会调用哪个方法

解决方案：

将回调方法替换为下面这个，就可以根据方法名来调用方法

applicationClick(methodsName){
    return this.$options.methods[methodsName]
},

六、手动生成新的表单，删除自动生成的表单

场景：

可以自己手动来控制表单项的个数

效果：

解决方案：

将你需要的对象放到表单集合中，然后在页面上使用“:for”来循环这个集合

点击添加按钮时，向这个集合中添加一个新的对象

点击删除时将对应的index传入，来删除指定的对象

 

七、element-ui上传组件使用代码演示

前端：

后端：

请求

content-type

 

八、后端获取的enums集合，前端显示变为List集合

场景：

从后台获取枚举来填充下拉框选项

现象：

后台断点显示直到返回都是一个枚举的集合。但是前端接口显示的是一个字符串集合

解决方案：

将枚举类转换成普通的类或者Map，前端才能正确的显示

添加注解

在枚举类上添加注解

@JsonFormat(shape = JsonFormat.Shape.OBJECT)

将枚举类转换成对象

手动编写转换代码