图库上传没有图片id

store/src/admin/goodsManage/img-store.vue

@@ -69,6 +69,7 @@
       :uploadPicApi="picAdd"
       @resultData="chooseImage"
       :imgList.sync="form.picIdList"
+      :isStorage="true"
     >
       <span></span>
     </app-uploader>
@@ -240,28 +241,28 @@ export default {
   },
   methods: {
     // 关闭操作按钮
-		operateCloseFn() {
-			this.operateData = {}
-			this.operateIndex = null
-			this.operateShow = false
-		},
-    operateList(index){
-      if(index === 0) {
+    operateCloseFn() {
+      this.operateData = {};
+      this.operateIndex = null;
+      this.operateShow = false;
+    },
+    operateList(index) {
+      if (index === 0) {
         this.modalCancel();
         this.form.picIdList = [this.operateData.id];
         this.settingModal = true;
-      }else if(index ===1) {
+      } else if (index === 1) {
         picTop({ id: this.operateData.id }).then(res => {
-              this.operateCloseFn();
-              this.$msg("置顶成功!");
-              setTimeout(() => {
-                this.resetList();
-                this._list();
-              }, 1000);
-            });
-      }else if(index === 2) {
-          this.delModal = true;
-      }else if(index ===3 ) {
+          this.operateCloseFn();
+          this.$msg("置顶成功!");
+          setTimeout(() => {
+            this.resetList();
+            this._list();
+          }, 1000);
+        });
+      } else if (index === 2) {
+        this.delModal = true;
+      } else if (index === 3) {
         this.delModal = true;
       }
     },

store/src/components/app-uploader.vue

@@ -1,455 +1,513 @@
 <template>
-	<view>
-		<div class="upload-box">
-			<slot>
-				<ul>
-					<li class="list_img" v-for="(item,index) in showImgList" :key="index" :style="{ width: size + 'rpx', height: size + 'rpx' }">
-						<div v-if="isMain" class="main-btn" :class="{'mian': index == 0}" @click.stop="mainImg(index)">主</div>
-						<view class="iconfont icondelete" @click="delImg(index)"></view>
-						<img :src="item" @click="viewImg(item)" :style="{ width: size + 'rpx', height: size + 'rpx' }" :mode="imgMode" />
-					</li>
-					<li v-if="showImgList.length < num && (multiple || showImgList.length == 0)" class="uploadImg" @click="chooseImage" :style="{ width: size + 'rpx', height: size + 'rpx' }">
-						<view class="iconfont icontupiantianjia"></view>
-					</li>
-				</ul>
-			</slot>
-		</div>
-	</view>
+  <view>
+    <div class="upload-box">
+      <slot>
+        <ul>
+          <li
+            class="list_img"
+            v-for="(item,index) in showImgList"
+            :key="index"
+            :style="{ width: size + 'rpx', height: size + 'rpx' }"
+          >
+            <div
+              v-if="isMain"
+              class="main-btn"
+              :class="{'mian': index == 0}"
+              @click.stop="mainImg(index)"
+            >主</div>
+            <view class="iconfont icondelete" @click="delImg(index)"></view>
+            <img
+              :src="item"
+              @click="viewImg(item)"
+              :style="{ width: size + 'rpx', height: size + 'rpx' }"
+              :mode="imgMode"
+            />
+          </li>
+          <li
+            v-if="showImgList.length < num && (multiple || showImgList.length == 0)"
+            class="uploadImg"
+            @click="chooseImage"
+            :style="{ width: size + 'rpx', height: size + 'rpx' }"
+          >
+            <view class="iconfont icontupiantianjia"></view>
+          </li>
+        </ul>
+      </slot>
+    </div>
+  </view>
 </template>
 <script>
-import { uploadPic } from '@/api/common'
+import { uploadPic } from "@/api/common";
+import { picAdd } from "@/api/img-store";
 export default {
-	name: 'app-uploader',
-	props: {
-		// 传入的图片数组
-		imgList: {
-			type: Array,
-			default: () => []
-		},
-		manualDel: {
-			type: Boolean,
-			default: false
-		},
-		// 图片的尺寸
-		size: {
-			type: Number,
-			default: 200
-		},
-		// 上传图片数量
-		num: {
-			type: Number,
-			default: 9
-		},
-		// 压缩图片
-		compress: {
-			type: Boolean,
-			default: true
-		},
-		// 默认限制图片1.5M,单位为M
-		maxSize: {
-			type: String,
-			default: '1.5M'
-		},
-		// 是否记录用户的选择记录
-		isSave: {
-			type: Boolean,
-			default: false
-		},
-		// 记录用户的缓存字段
-		saveStr: {
-			type: String,
-			default: 'chooseImage'
-		},
-		// 是否转base64 受数据传输长度限制，不建议在组件中使用，如果一定要使用，在返回结果中自己转换
-		isBase64: {
-			type: Boolean,
-			default: false
-		},
-		multiple: {
-			// 是否多图上传
-			type: Boolean,
-			default: true
-		},
-		disabled: {
-			// 是否只读
-			type: Boolean,
-			default: false
-		},
-		// 图片展示模式
-		imgMode: {
-			type: String,
-			default: 'scaleToFill'
-		},
-		// uploadPic: {
-		// 	type: Function,
-		// 	default: uploadPic
-		// },
-		// 是否显示主图切换
-		isMain: {
-			type: Boolean,
-			default: false
-		}
-	},
-	data() {
-		return {
-			resultData: {},
-			showImgList: [],
-			base64ImgList: [],
-			xssarr: ['data:', 'text', 'txt', 'html', 'js', 'css', 'json', 'exe', 'sql', 'xml', 'doc', 'docx']
-		}
-	},
-	onLoad() {
-		if (this.isSave) {
-			let str = uni.getStorageSync(this.saveStr)
-			if (str !== '') {
-				str = str.split(',')
-				if (str.length > this.num) {
-					str = str.slice(0, this.num)
-				}
-				this.showImgList = str
-			}
-		} else {
-			uni.removeStorageSync(this.saveStr)
-		}
-		this.showImgList = [...this.imgList]
-	},
-	methods: {
-		chooseImage: async function() {
-			if (this.disabled) {
-				return
-			}
-			let that = this
-			let tempFilePaths = await that.getImage()
-			await that.blobToBase64(tempFilePaths)
-			await that.autoUploadImg()
-			await that.postMsg()
-			return this.showImgList
-		},
+  name: "app-uploader",
+  props: {
+    // 传入的图片数组
+    imgList: {
+      type: Array,
+      default: () => []
+    },
+    manualDel: {
+      type: Boolean,
+      default: false
+    },
+    // 图片的尺寸
+    size: {
+      type: Number,
+      default: 200
+    },
+    // 上传图片数量
+    num: {
+      type: Number,
+      default: 9
+    },
+    // 压缩图片
+    compress: {
+      type: Boolean,
+      default: true
+    },
+    // 默认限制图片1.5M,单位为M
+    maxSize: {
+      type: String,
+      default: "1.5M"
+    },
+    // 是否记录用户的选择记录
+    isSave: {
+      type: Boolean,
+      default: false
+    },
+    // 记录用户的缓存字段
+    saveStr: {
+      type: String,
+      default: "chooseImage"
+    },
+    // 是否转base64 受数据传输长度限制，不建议在组件中使用，如果一定要使用，在返回结果中自己转换
+    isBase64: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      // 是否多图上传
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      // 是否只读
+      type: Boolean,
+      default: false
+    },
+    // 图片展示模式
+    imgMode: {
+      type: String,
+      default: "scaleToFill"
+    },
+    // uploadPic: {
+    // 	type: Function,
+    // 	default: uploadPic
+    // },
+    // 是否显示主图切换
+    isMain: {
+      type: Boolean,
+      default: false
+    },
+    //图库图片上传 shish  2020.5.18
+    isStorage: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      resultData: {},
+      showImgList: [],
+      base64ImgList: [],
+      xssarr: [
+        "data:",
+        "text",
+        "txt",
+        "html",
+        "js",
+        "css",
+        "json",
+        "exe",
+        "sql",
+        "xml",
+        "doc",
+        "docx"
+      ]
+    };
+  },
+  onLoad() {
+    if (this.isSave) {
+      let str = uni.getStorageSync(this.saveStr);
+      if (str !== "") {
+        str = str.split(",");
+        if (str.length > this.num) {
+          str = str.slice(0, this.num);
+        }
+        this.showImgList = str;
+      }
+    } else {
+      uni.removeStorageSync(this.saveStr);
+    }
+    this.showImgList = [...this.imgList];
+  },
+  methods: {
+    chooseImage: async function() {
+      if (this.disabled) {
+        return;
+      }
+      console.log("执行到这里.....");
+      let that = this;
+      let tempFilePaths = await that.getImage();
+      await that.blobToBase64(tempFilePaths);
+      await that.autoUploadImg();
+      await that.postMsg();
+      return this.showImgList;
+    },
+    postMsg() {
+      this.$emit("update:imgList", this.showImgList);
+      this.$emit("chooseImage", this.showImgList);
+      this.$emit("resultData", this.resultData);
+    },
 
-		postMsg() {
-			this.$emit('update:imgList', this.showImgList)
-			this.$emit('chooseImage', this.showImgList)
-			this.$emit('resultData', this.resultData)
-		},
+    autoUploadImg() {
+      let that = this;
+      let base64ImgList = that.base64ImgList;
+      let params = {};
+      if (base64ImgList.length === 1) {
+        params["content"] = base64ImgList[0];
+      } else {
+        base64ImgList.forEach((item, index) => {
+          params[`file[${index}][content]`] = item;
+        });
+      }
+      return new Promise((resolve, reject) => {
+        //这块需要优化，我只是简单复制了下 shish 2020.5.18
+        if (this.isStorage) {
+          picAdd({
+            ...params
+          }).then(res => {
+            if (res.code === 1) {
+              let imgArr = [res.data.url];
+              that.showImgList = [...that.showImgList, ...imgArr];
+              that.resultData = res.data;
+              this.$emit("currentUpload", imgArr);
+              this.$emit("getResult", that.showImgList);
+              resolve(that.showImgList);
+            } else {
+              reject(res);
+            }
+          });
+        } else {
+          uploadPic({
+            ...params
+          }).then(res => {
+            if (res.code === 1) {
+              let imgArr = [res.data.url];
+              that.showImgList = [...that.showImgList, ...imgArr];
+              that.resultData = res.data;
+              this.$emit("currentUpload", imgArr);
+              this.$emit("getResult", that.showImgList);
+              resolve(that.showImgList);
+            } else {
+              reject(res);
+            }
+          });
+        }
+      });
+    },
+    // 转64
+    async blobToBase64(tempFilePaths) {
+      let that = this;
+      that.base64ImgList = [];
+      let newImgList = [...tempFilePaths];
+      for (let i = 0; i < newImgList.length; i++) {
+        let blob = newImgList[i];
+        // 转64位后可以看文件类型 data:text/
+        // #ifdef H5
+        // 如果是服务器返回的图片不转base64
+        // if (blob.indexOf('blob') !== 0) {
+        // 	that.imgPathList.push(blob)
+        // 	continue
+        // }
+        await that.h5b64(blob).then(res => {
+          let startindex = res.indexOf(":");
+          let endindex = res.indexOf("/");
+          let type = res.substring(startindex + 1, endindex);
+          if (that.xssarr.indexOf(type) === -1) {
+            that.base64ImgList.push(res);
+          }
+        });
+        // #endif
 
-		autoUploadImg() {
-			let that = this
-			let base64ImgList = that.base64ImgList
-			let params = {}
-			if (base64ImgList.length === 1) {
-				params['content'] = base64ImgList[0]
-			} else {
-				base64ImgList.forEach((item, index) => {
-					params[`file[${index}][content]`] = item
-				})
-			}
-			return new Promise((resolve, reject) => {
-				uploadPic({
-					...params
-				}).then(res => {
-					if (res.code === 1) {
-						let imgArr = [res.data.url]
-						that.showImgList = [...that.showImgList, ...imgArr]
-						that.resultData = res.data
-						this.$emit('currentUpload', imgArr)
-						this.$emit('getResult', that.showImgList)
-						resolve(that.showImgList)
-					} else {
-						reject(res)
-					}
-				})
-			})
-		},
-		// 转64
-		async blobToBase64(tempFilePaths) {
-			let that = this
-			that.base64ImgList = []
-			let newImgList = [...tempFilePaths]
-			for (let i = 0; i < newImgList.length; i++) {
-				let blob = newImgList[i]
-				// 转64位后可以看文件类型 data:text/
-				// #ifdef H5
-				// 如果是服务器返回的图片不转base64
-				// if (blob.indexOf('blob') !== 0) {
-				// 	that.imgPathList.push(blob)
-				// 	continue
-				// }
-				await that.h5b64(blob).then(res => {
-					let startindex = res.indexOf(':')
-					let endindex = res.indexOf('/')
-					let type = res.substring(startindex + 1, endindex)
-					if (that.xssarr.indexOf(type) === -1) {
-						that.base64ImgList.push(res)
-					}
-				})
-				// #endif
+        // #ifdef MP-WEIXIN
+        // 微信临时文件  http://tmp/wx3a16...
+        // if (blob.indexOf('http://tmp/') !== 0) {
+        // 	that.imgPathList.push(blob)
+        // 	continue
+        // }
+        await that.WEIXINb64(blob).then(res => {
+          that.base64ImgList.push(res);
+        });
+        // #endif
+      }
+    },
+    WEIXINb64(blob) {
+      return new Promise((resolve, reject) => {
+        uni.getFileSystemManager().readFile({
+          filePath: blob, // 选择图片返回的相对路径
+          encoding: "base64", // 编码格式
+          success: function(res) {
+            let b64str = "data:image/jpeg;base64," + res.data;
+            resolve(b64str);
+          },
+          fail: function(err) {
+            console.log(err);
+          }
+        });
+      });
+    },
+    h5b64(blob) {
+      return fetch(blob, {
+        method: "GET",
+        headers: new Headers({
+          "Access-Control-Allow-Origin": "*",
+          "Content-Type": "text/plain"
+        }),
+        mode: "no-cors"
+      })
+        .then(data => {
+          const blob = data.blob();
+          return blob;
+        })
+        .then(async blob => {
+          let reader = new FileReader();
+          reader.readAsDataURL(blob);
+          // return await new Promise((res, reg) => {
+          // 	reader.onloadend = function() {
+          // 		const data = reader.result
+          // 		res(data)
+          // 	}
+          // })
+          return await new Promise((res, reg) => {
+            reader.onloadend = function() {
+              let data = reader.result;
+              let str = data.substring(0, 30);
+              if (str.indexOf(":image/jpeg;") == -1) {
+                data = data.replace("data:;", "data:image/jpeg;");
+              }
+              res(data);
+            };
+          });
+        });
+    },
 
-				// #ifdef MP-WEIXIN
-				// 微信临时文件  http://tmp/wx3a16...
-				// if (blob.indexOf('http://tmp/') !== 0) {
-				// 	that.imgPathList.push(blob)
-				// 	continue
-				// }
-				await that.WEIXINb64(blob).then(res => {
-					that.base64ImgList.push(res)
-				})
-				// #endif
-			}
-		},
-		WEIXINb64(blob) {
-			return new Promise((resolve, reject) => {
-				uni.getFileSystemManager().readFile({
-					filePath: blob, // 选择图片返回的相对路径
-					encoding: 'base64', // 编码格式
-					success: function(res) {
-						let b64str = 'data:image/jpeg;base64,' + res.data
-						resolve(b64str)
-					},
-					fail: function(err) {
-						console.log(err)
-					}
-				})
-			})
-		},
-		h5b64(blob) {
-			return fetch(blob, {
-				method: 'GET',
-				headers: new Headers({
-					'Access-Control-Allow-Origin': '*',
-					'Content-Type': 'text/plain'
-				}),
-				mode: 'no-cors'
-			})
-				.then(data => {
-					const blob = data.blob()
-					return blob
-				})
-				.then(async blob => {
-					let reader = new FileReader()
-					reader.readAsDataURL(blob)
-					// return await new Promise((res, reg) => {
-					// 	reader.onloadend = function() {
-					// 		const data = reader.result
-					// 		res(data)
-					// 	}
-					// })
-					return await new Promise((res, reg) => {
-						reader.onloadend = function() {
-							let data = reader.result
-							let str = data.substring(0, 30)
-							if (str.indexOf(':image/jpeg;') == -1) {
-								data = data.replace('data:;', 'data:image/jpeg;')
-							}
-							res(data)
-						}
-					})
-				})
-		},
+    // 上传图片
+    getImage() {
+      let that = this;
+      let showImgList = that.showImgList;
+      let count = that.num - showImgList.length;
+      return new Promise((resolve, reject) => {
+        uni.chooseImage({
+          count: this.multiple ? count : 1, // 默认9
+          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
+          sourceType: ["album", "camera"], // 从相册选择
+          success: async function(res) {
+            await that.fileValid(res);
+            var tempFilePaths = res.tempFilePaths;
+            console.log(tempFilePaths);
+            if (that.isSave) {
+              uni.setStorageSync(that.saveStr, showImgList.join(","));
+            }
+            resolve(tempFilePaths);
+          }
+        });
+      });
+    },
+    // 文件过滤
+    fileValid(res) {
+      let tempFiles = res.tempFiles;
+      let tempFilePaths = res.tempFilePaths;
+      let newtempFiles = [];
+      let newtempFilePaths = [];
 
-		// 上传图片
-		getImage() {
-			let that = this
-			let showImgList = that.showImgList
-			let count = that.num - showImgList.length
-			return new Promise((resolve, reject) => {
-				uni.chooseImage({
-					count: this.multiple ? count : 1, // 默认9
-					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
-					sourceType: ['album', 'camera'], // 从相册选择
-					success: async function(res) {
-						await that.fileValid(res)
-						var tempFilePaths = res.tempFilePaths
-						if (that.isSave) {
-							uni.setStorageSync(that.saveStr, showImgList.join(','))
-						}
-						resolve(tempFilePaths)
-					}
-				})
-			})
-		},
-		// 文件过滤
-		fileValid(res) {
-			let tempFiles = res.tempFiles
-			let tempFilePaths = res.tempFilePaths
-			let newtempFiles = []
-			let newtempFilePaths = []
+      for (let i = 0; i < tempFiles.length; i++) {
+        // 大于1.5m就不让上传
+        let fileSize = tempFiles[i].size;
+        if (fileSize > 1024 * 1024 * 1.5) {
+          uni.showToast({
+            title: "过滤不能大于1.5m的文件",
+            duration: 2000,
+            icon: "none"
+          });
+          continue;
+        }
 
-			for (let i = 0; i < tempFiles.length; i++) {
-				// 大于1.5m就不让上传
-				let fileSize = tempFiles[i].size
-				if (fileSize > 1024 * 1024 * 1.5) {
-					uni.showToast({
-						title: '过滤不能大于1.5m的文件',
-						duration: 2000,
-						icon: 'none'
-					})
-					continue
-				}
+        // 文件类型设置
+        let spl = tempFiles[i].path.split(".");
+        let fileType = spl[spl.length - 1];
+        if (fileType && this.xssarr.indexOf(fileType) >= 0) {
+          uni.showToast({
+            title: "过滤不符合规范文件",
+            duration: 2000,
+            icon: "none"
+          });
+          continue;
+        }
 
-				// 文件类型设置
-				let spl = tempFiles[i].path.split('.')
-				let fileType = spl[spl.length - 1]
-				if (fileType && this.xssarr.indexOf(fileType) >= 0) {
-					uni.showToast({
-						title: '过滤不符合规范文件',
-						duration: 2000,
-						icon: 'none'
-					})
-					continue
-				}
-
-				newtempFiles.push(tempFiles[i])
-				newtempFilePaths.push(tempFilePaths[i])
-			}
-			res.tempFiles = newtempFiles
-			res.tempFilePaths = newtempFilePaths
-			// console.log('过滤完了')
-		},
-		// 设为主图
-		mainImg(index) {
-			if (index == 0) return false
-			this.$msg('操作成功！')
-			// let imgArr = JSON.parse(JSON.stringify(this.showImgList))
-			let imgUrl = this.showImgList[index]
-			this.showImgList.splice(index, 1)
-			this.showImgList.unshift(imgUrl)
-			// this.$emit('mainImg', index)
-			this.postMsg()
-		},
-		// 删除
-		async delImg(index) {
-			if (this.disabled) {
-				return
-			}
-			if (this.isSave) {
-				uni.setStorageSync(this.saveStr, this.showImgList.join(','))
-			}
-			if (!this.manualDel) {
-				this.showImgList.splice(index, 1)
-			} else {
-				this.$emit('delImage', index)
-			}
-			await this.postMsg()
-		},
-		// 预览
-		viewImg(path) {
-			uni.previewImage({
-				urls: this.showImgList,
-				current: path
-			})
-		},
-		// 获取图片信息
-		getImageInfo(image, cb) {
-			uni.getImageInfo({
-				src: image,
-				success: function(image) {
-					cb(image)
-					return image
-				}
-			})
-		},
-		// 图片压缩
-		compressImage() {
-			uni.compressImage({
-				src: image,
-				quality: 80,
-				complete: res => {}
-			})
-		}
-	},
-	watch: {
-		imgList(val) {
-			console.log('监听图片数据变化')
-			this.showImgList = [...val]
-		}
-	}
-}
+        newtempFiles.push(tempFiles[i]);
+        newtempFilePaths.push(tempFilePaths[i]);
+      }
+      res.tempFiles = newtempFiles;
+      res.tempFilePaths = newtempFilePaths;
+      // console.log('过滤完了')
+    },
+    // 设为主图
+    mainImg(index) {
+      if (index == 0) return false;
+      this.$msg("操作成功！");
+      // let imgArr = JSON.parse(JSON.stringify(this.showImgList))
+      let imgUrl = this.showImgList[index];
+      this.showImgList.splice(index, 1);
+      this.showImgList.unshift(imgUrl);
+      // this.$emit('mainImg', index)
+      this.postMsg();
+    },
+    // 删除
+    async delImg(index) {
+      if (this.disabled) {
+        return;
+      }
+      if (this.isSave) {
+        uni.setStorageSync(this.saveStr, this.showImgList.join(","));
+      }
+      if (!this.manualDel) {
+        this.showImgList.splice(index, 1);
+      } else {
+        this.$emit("delImage", index);
+      }
+      await this.postMsg();
+    },
+    // 预览
+    viewImg(path) {
+      uni.previewImage({
+        urls: this.showImgList,
+        current: path
+      });
+    },
+    // 获取图片信息
+    getImageInfo(image, cb) {
+      uni.getImageInfo({
+        src: image,
+        success: function(image) {
+          cb(image);
+          return image;
+        }
+      });
+    },
+    // 图片压缩
+    compressImage() {
+      uni.compressImage({
+        src: image,
+        quality: 80,
+        complete: res => {}
+      });
+    }
+  },
+  watch: {
+    imgList(val) {
+      console.log("监听图片数据变化");
+      this.showImgList = [...val];
+    }
+  }
+};
 </script>
 <style scoped lang="scss">
-	.uni-system-preview-image {
-		background-color: rgba(0, 0, 0, 0.9);
+.uni-system-preview-image {
+  background-color: rgba(0, 0, 0, 0.9);
 
-		.uni-preview-image {
-			max-width: 100%;
-		}
-	}
+  .uni-preview-image {
+    max-width: 100%;
+  }
+}
 
-	.upload-box {
-		padding: 0 30px;
-		&:first-child {
-			padding-left: 0;
-		}
+.upload-box {
+  padding: 0 30px;
+  &:first-child {
+    padding-left: 0;
+  }
 
-		& > ul {
-			display: inline-block;
-			display: flex;
-			flex-wrap: wrap;
+  & > ul {
+    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
 
-			& > li {
-				list-style: none;
-				width: 210px;
-				height: 210px;
-				margin: 0 20px 20px 0;
-				position: relative;
-				background-color: #fff;
+    & > li {
+      list-style: none;
+      width: 210px;
+      height: 210px;
+      margin: 0 20px 20px 0;
+      position: relative;
+      background-color: #fff;
 
-				.icondelete {
-					font-size: 25px;
-					z-index: 999;
-					position: absolute;
-					right: 0;
-					bottom: 0;
-					color: #fff;
-					padding: 0 2px;
-					background-color: rgba(0, 0, 0, 0.45);
-				}
+      .icondelete {
+        font-size: 25px;
+        z-index: 999;
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+        padding: 0 2px;
+        background-color: rgba(0, 0, 0, 0.45);
+      }
 
-				.main-btn {
-					position: absolute;
-					top: 0;
-					left: 0;
-					z-index: 999;
-					@include disFlex(center, center);
-					width: 44px;
-					height: 44px;
-					background-color: #CCC;
-					color: #fff;
-					&.mian {
-						background-color: $mainColor;
-						color: #fff;
-					}
-				}
-			}
-		}
+      .main-btn {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 999;
+        @include disFlex(center, center);
+        width: 44px;
+        height: 44px;
+        background-color: #ccc;
+        color: #fff;
+        &.mian {
+          background-color: $mainColor;
+          color: #fff;
+        }
+      }
+    }
+  }
 
-		& .list_img {
-			& > img {
-				width: 100%;
-				height: 100%;
-			}
-		}
+  & .list_img {
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
 
-		& .uploadImg {
-			border: 1px dashed #e5e5e5;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			box-sizing: border-box;
+  & .uploadImg {
+    border: 1px dashed #e5e5e5;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
 
-			.upload_ipt {
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				/*overflow:hidden;*/
-				cursor: pointer;
-				opacity: 0;
-			}
+    .upload_ipt {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      /*overflow:hidden;*/
+      cursor: pointer;
+      opacity: 0;
+    }
 
-			.iconfont {
-				color: rgb(150, 151, 153);
-				font-size: 40px;
-			}
-		}
-	}
+    .iconfont {
+      color: rgb(150, 151, 153);
+      font-size: 40px;
+    }
+  }
+}
 </style>