uni-app 图片上传 demo

upload-imgs.css

/* 第一套图片上传样式（内部图标相机） */ .upload-image-view { width: 100%; margin: 20upx 0 20upx 0; display: flex; flex-wrap: wrap; align-items: center; } .upload-image-view .title { width: 100%; font-family: PingFang-SC-Regular; font-size: 24upx; color: #4a4a4a; margin-bottom: 15upx; line-height: 100%; } .upload-image-view .info { width: 100%; font-family: PingFang-SC-Regular; font-size: 24upx; color: #ff4259; height: 24upx; margin-top: 15upx; line-height: 24upx; } .upload-image-view .image-view { height: 130upx; width: 130upx; position: relative; margin: 15upx 15upx 15upx 0upx; border-radius: 8upx; } .upload-image-view .image-view image { height: 100%; width: 100%; border-radius: 8upx; } .upload-image-view .image-view .del-btn { background-color: #f67371; border-radius: 50%; width: 25upx; height: 25upx; position: absolute; top: -12upx; right: -12upx; z-index: 2; display: flex; justify-content: center; align-items: center; } .upload-image-view .image-view .del-btn .baicha { display: inline-block; width: 20upx; height: 5upx; background: #fff; line-height: 0; font-size: 0; vertical-align: middle; -webkit-transform: rotate(45deg); } .upload-image-view .image-view .del-btn .baicha:after { content: '/'; display: block; width: 20upx; height: 5upx; background: #fff; -webkit-transform: rotate(-90deg); } .upload-image-view .add-view { height: 115upx; width: 115upx; margin: 15upx 15upx 15upx 0upx; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.00); border: 3upx dashed #979797; border-radius: 8upx; } /* 相机 */ .upload-image-view .add-view .xiangji { height: 40upx; width: 48upx; display: flex; justify-content: center; flex-wrap: wrap; } .upload-image-view .add-view .xiangji .tixing { width: 10upx; height: 7upx; background-color: #fff; border-right: 10upx solid #fff; border-bottom: 7upx solid #b2b2b2; border-left: 10upx solid #fff; } .upload-image-view .add-view .xiangji .changfx { height: 32upx; width: 48upx; border-radius: 5%; background-color: #b2b2b2; display: flex; align-items: center; justify-content: center; } .upload-image-view .add-view .xiangji .changfx .yuan1 { height: 20upx; width: 20upx; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; } .upload-image-view .add-view .xiangji .changfx .yuan2 { height: 10upx; width: 10upx; border-radius: 50%; background-color: #b2b2b2; } /* 第二套图片上传样式（内部图标 十字架）*/ /* 十字架 */ .upload-image-view .add-view .cross { height: 48upx; width: 48upx; display: flex; flex-wrap: wrap; position: relative; } .upload-image-view .add-view .cross .transverse-line { height: 100%; width: 48%; position: absolute; border-right: 3upx solid #5A5A5A; top: 0; left: 0; } .upload-image-view .add-view .cross .vertical-line { height: 48%; width: 100%; position: absolute; border-bottom: 3upx solid #5A5A5A; top: 0; left: 0; } /* 第一套图片上传样式（内部图标相机） */ .upload-im