关于使用el-upload组件上传多张图片的问题

首先,前端页面使用的是vue的框架。图片上传使用的是element的el-upload组件。其中需要注意的是:1:

上传多张图片时,只需要把参数配置成:limit大于1的数字即可。2:prop中的参数需要跟后台进行交互,warehousePhotoUrl: []需要以数组的形式传给后台。3::data是我在自己项目中使用的传参,uploadCangKuParams: {bizType:'WARE_HOUSE_IMAGE'}。为了定义此图片上传的类型,因项目而异吧。4:handleSuccessWard中主要处理上传成功的事件,如下图:

关于使用el-upload组件上传多张图片的问题_第1张图片
这是官网中关于el-upload的参数说明。详情还请参考https://eleme.github.io/element-react/#/zh-CN/upload。
关于使用el-upload组件上传多张图片的问题_第2张图片
也可以直接参考官网的地址:https://eleme.github.io/element-react/#/zh-CN/upload

其中涉及到前后台交互的方面。前台需要把参数拼接成数组形势如图:

关于使用el-upload组件上传多张图片的问题_第3张图片
此时关于前端的设置完毕。这边后台我使用的语言是java。需要找一个后台上传多张图片的处理方法即可。然后如果此表单以form形式提交给后台,需要在参数上写上@ReuqestBody来把前台参数转换成body处理。否则一直会包各种错误。建议有需要的小伙伴尝试下。有问题还希望大家多多指导,赐教。谢谢

你可能感兴趣的:(关于使用el-upload组件上传多张图片的问题)