iView(ViewUI)多图上传

cnpm install view-design --save

2，引入ViewUI。

// import iView from 'iview';
// import 'iview/dist/styles/iview.css';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
//Vue.use(iView)
Vue.use(ViewUI);

3,编写代码

4，需要注意的地方

4.1，template下加个div，否则多个根元素会报错

4.2，其余代码格式结构保持不变，div红框代表已上传的图片列表展示，里面的两个handleView是预览handleRemove是删除。on-remove钩子函数测试发现无效，可用此处handleRemove代替

 4.3，upload中请添加name属性（如果需要），action替换成自己的接口地址

4.4，Modal中替换：src图片地址

4.5，:on-success钩子函数请将上传成功的图片地址和名称赋值给 file.url和 file.name

本代码上传前默认效果与上传后效果