用户头像由上传模式改为 媒体库选择模式

web/src/components/chooseImg/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-drawer title="媒体库" :visible.sync="drawer" :with-header="false">
+    <div style="display:flex;justify-content:space-around;flex-wrap:wrap;padding-top:40px">
+      <el-image
+        class="header-img-box-list"
+        :src="item.url"
+        v-for="(item,key) in picList"
+        :key="key"
+        @click.native="chooseImg(item.url,target,targetKey)"
+      >
+        <div slot="error" class="header-img-box-list">
+          <i class="el-icon-picture-outline"></i>
+        </div>
+      </el-image>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+import { getFileList } from "@/api/fileUploadAndDownload";
+export default {
+  props: {
+    target: [Object],
+    targetKey: [String]
+  },
+  data() {
+    return {
+      drawer: false,
+      picList: []
+    };
+  },
+  methods: {
+    chooseImg(url, target, targetKey) {
+      if(target&&targetKey){
+        target[targetKey] = url;
+      }
+      this.$emit("enter-img", url);
+      this.drawer = false;
+    },
+    async open() {
+      const res = await getFileList({ page: 1, pageSize: 9999 });
+      this.picList = res.data.list;
+      this.drawer = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.header-img-box-list {
+  width: 180px;
+  height: 180px;
+  border: 1px dashed #ccc;
+  border-radius: 20px;
+  text-align: center;
+  line-height: 180px;
+  cursor: pointer;
+}
+</style>