浏阳市住房和城乡建设局的网站,网上购物管理系统设计与实现,网站在建设中是什么意思,自己建论坛总结#xff1a;平常使用v-for的key都是使用index#xff0c;这里vue官方文档也不推荐#xff0c;这个时候就出问题了#xff0c;我们需要key为唯一标识#xff0c;这里我使用了时间戳#xff08;new Date().getTime()#xff09;处理比较复杂的情况#xff0c; 本文章…总结平常使用v-for的key都是使用index这里vue官方文档也不推荐这个时候就出问题了我们需要key为唯一标识这里我使用了时间戳new Date().getTime()处理比较复杂的情况 本文章参考 链接: https://www.jb51.net/javascript/29041834i.htm 效果图 disabled 上传完一张图片之后把上传‘’样式隐藏 详见vue element-ui v-for循环el-upload上传图片 动态添加、删除
//disabled 上传完一张图片之后把上传‘’样式隐藏 详见[vue element-ui v-for循环el-upload上传图片 动态添加、删除](https://blog.csdn.net/sumimg/article/details/132620328)
el-form-item label资源列表div classziyuan flex v-for(item, indexes) in addList :keyitem.idxxxdiv stylemargin-top: 9px;el-upload :actiondomins /common/upload:class{ disabled: item.uploadDisabled } list-typepicture-card:before-uploadbeforeUploadOne :on-previewhandlePictureCardPreview:on-removehandleRemove.bind(null, { index: indexes, data: item }):on-successhandleAvatarSuccess.bind(null, { index: indexes, data: item }):on-changehandleChange.bind(null, { index: indexes, data: item }):file-listitem.fileList acceptimage/png, image/jpegi classel-icon-plus/i/el-uploadel-dialog :visible.syncdialogVisibleimg width100% :srcitem.dialogImageUrl alt/el-dialog/divdiv classyasuo flexcross:centerdivdiv styleheight: 68px;el-upload refuploadzip :actiondomins /common/upload:on-removehandleRemoveZip:on-successhandleAvatarSuccessZip.bind(null, { index: indexes, data: item }):on-changehandleChangeZip :file-listitem.fileListZip:auto-uploadtrue accept.zip,.rar,.ab :limit1el-button sizesmall typeprimary选择压缩包/el-button/el-upload/divdiv classbanben v-showaddmu 1 || jzyFlag 2版本号{{item.versions ? item.versions : 1.0.0 }}/div/div/divdiv classairadioel-radio-group v-modelitem.wayel-radio :label0Android/el-radioel-radio :label1ios/el-radio/el-radio-group/divdiv stylemargin-top: 11px;i classel-icon-circle-plus-outline stylecolor: #264E71;clickplusOne(indexes)/ii classel-icon-remove-outline stylecolor: #264E71; v-showaddList.length 1clickremoveOne(indexes, item.id, item)/i/div/div/el-form-item压缩文件 imageConversion 详见 vueelementUI 上传图片时压缩图片
script
import * as imageConversion from image-conversion;
export default {components: { },data() {return {addList: [{id: 0,uploadDisabled: false,album: ,zip: ,way: 0,idxxx: 0// fileList: [],// fileListZip: []}],}}
}
/script删除某一项 idxxx作为唯一标识因为需求原因 在没添加时间戳(new Date().getTime())之前是没有唯一标识的
//再后面添加一项idxxx作为唯一标识因为需求原因 在没添加时间戳之前是没有唯一标识的plusOne() {this.addList.push({id: 0,uploadDisabled: false,album: ,zip: ,way: 0,idxxx: new Date().getTime()})
},
removeOne(index, id, item) {
//使用唯一标识删除this.addList [...this.addList.filter(e e.idxxx ! item.idxxx)]
},下面是其他的上传文件的方法
// 模板图片
beforeUploadOne(file) {console.log(file.size, 压缩前);const isJpgOrPng file.type image/jpeg || file.type image/png;const isLt1M file.size / 1024 / 1024 1;console.log(file.size / 1024 / 1024, isLt1M);if (file.size / 1024 / 1024 2 || file.size / 1024 / 1024 2) {this.$message.error(上传图片不能超过2M);return false;}if (!isJpgOrPng) {this.$message.error(上传图片只能是 JPG 或 PNG 格式!);return false;}return new Promise((resolve) {// 小于1M 不压缩// if (isLt1M) {// resolve(file)// }// 压缩到600KB,这里的600就是要压缩的大小,可自定义imageConversion.compressAccurately(file, 600).then((res) {console.log(res, -----res);resolve(res);});});
},
handlePictureCardPreviewOne(file) {console.log(file, file);this.dialogImageUrlOne file.url;this.dialogVisibleOne true;
},
handleRemoveOne(file, fileList) {console.log(file, fileList);this.uploadDisabledOne false;
},
handleAvatarSuccessOne(res, file) {console.log(res, file, res, file);this.dialogImageUrlOne res.data.fullurlconsole.log(this.dialogImageUrlOne, this.dialogImageUrlOne图片路径);
},
uploadSectionFileOne(file, fileList) {if (fileList.length 1) {this.uploadDisabledOne true;}
},// zip
handleRemoveZip(file, fileList) {console.log(file, fileList, 移走路径);
},
handleAvatarSuccessZip(obj, res, file) {console.log(res, file, res, file111);console.log(res.data.fullurl, 压缩包路径)this.zip_file res.data.fullurllet imgList this.addListlet index obj.index;this.addList[index].zip res.data.fullurl},
handleChangeZip(file, fileList) {},css .disabled
.disabled .el-upload--picture-card {display: none !important;
}
