View UI（iView） Upload 自定义多图上传列表提交

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

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

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

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

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

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

图片上传后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;
}

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

   
 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;        
        }    
}

后台保存提交上传图片的列表

imgUrl: JSON.stringify(this.uploadList),

PHP后台接收保存到数据库

$_imgUrl =json_decode(input('post.imgUrl'),true);

if (is_array($_imgUrl)) {
     for ($i=0; $i 

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 服务器数据恢复—V7000存储raid5崩溃导致上层卷无法使用的数据恢复案例

服务器数据恢复环境： 某品牌V7000存储中有一组由几十块硬盘组建的raid5阵列。上层操作系统为windows server，NTFS分区。 服务器故障： 有一块硬盘出现故障离线，热备盘自动上线替换离线硬盘。在热备盘上线同步数据的过程，与离线盘同一组Mdis…