iView Upload 自定义多图上传列表提交

可以自由控制上传列表，完成各种业务逻辑，示例是一个照片墙，可以查看大图和删除。

• 设置属性 show-upload-list 为 false，可以不显示默认的上传列表。
• 设置属性 default-file-list 设置默认已上传的列表。

• 通过 on-success 等属性来控制完整的上传过程，详见API。另外，可以通过丰富的配置，来定制上传需求，本例中包含了：

• 文件必须是 jpg 或 png 格式的图片。

• 最多上传5张图片。
• 每个文件大小不超过 2M。

• <div class="upload-list" v-for="item in uploadList"><div v-if="item.status === 'finished'"> <img :src="item.url"><div class="upload-list-cover"><Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon><Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon></div>
  </div><div v-else><Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>                         </div>
  </div>
  <Upload
  ref="upload"
  :show-upload-list="false"
  :default-file-list="defaultList"
  :on-success="handleSuccessImgUrl"
  :format="['jpg','png','gif']"
  :max-size="2048"
  :on-format-error="handleFormatError"
  :on-exceeded-size="handleMaxSize"
  :before-upload="handleBeforeUpload" 
  name='fileDataFileName'
  action="/Upload/ImgUpload" 
  style="display: inline-block;width:58px;"> 
  <div style="width: 58px;height:58px;line-height: 58px;">
  <Icon type="ios-camera" size="20"></Icon>
  </div>
  </Upload>
  <Modal title="View Image" v-model="visible"> 
  <img :src="imgName" v-if="visible" style="width: 100%"></Modal>

   

        

图片上传后CSS样式列表.upload-list img {width:100%;height:100%;}.upload-list-cover {display:none;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.6);
}.upload-list:hover .upload-list-cover 
{display:block;}.upload-list-cover i {
color:#fff;
font-size:20px;
cursor:pointer;
margin:0 2px;
}

上传操作并更新上传图片列表

<script>   export default {   data () {    return {   defaultList: [{'name': 'a42bdcc1178e62b4694c830f028db5c0',                                                                        'url': 'a42bdcc1178e62b4694c830f028db5c0.jpg'       },                {                     'name': 'bc7521e033abdd1e92222d733590f104','url': 'bc7521e033abdd1e92222d733590f104.jpg'                    }                ], imgName: '', visible: false,uploadList: []  }      },    methods: {handleView (name) {this.imgName = name;this.visible = true;}, handleRemove (file) { const fileList = this.$refs.upload.fileList;              this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); },   handleSuccess (res, file) { file.url = res.data;            },handleFormatError (file) { this.$Notice.warning({title: 'The file format is incorrect',desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'                });            }, handleMaxSize (file) {this.$Notice.warning({title: '超出文件大小限制',desc: '文件  ' + file.name + ' 太大, 不要超过 2M.'});},handleBeforeUpload () {const check = this.uploadList.length < 5;if (!check) {this.$Notice.warning({title: '最多可上传5张图片.'});}return check;}},mounted () { this.uploadList = this.$refs.upload.fileList;        }    
}</script>后台保存提交上传图片的列表imgUrl: JSON.stringify(this.uploadList),PHP后台接收保存到数据库$_imgUrl =json_decode(input('post.imgUrl'),true);if (is_array($_imgUrl)) {for ($i=0; $i < count($_imgUrl); $i++) {$imgUrl .= $_imgUrl[$i]['url'].",";     }
}
$imgUrl=substr($imgUrl,0,strlen($imgUrl)-1);重新编辑时加载upload图片获取显示列表imgUrl = itemInfo.img_url.split(",");
for(var i = 0; i < imgUrl.length; i++) {_this.uploadList.push({name:'',url:imgUrl[i],showProgress: false,status: "finished"});}