gengxin

src/components/upload.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :limit="limit"
+      :on-exceed="outLimit"
+      :on-preview="handlePictureCardPreview"
+      :before-remove="handleRemove"
+      :on-success="onSuccess"
+      :show-file-list="false"
+    >
+      <el-avatar :size="80" fit="fill" :src="`${fileUrl}?${new Date().getTime()}`"></el-avatar>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'upload',
+  props: {
+    url: { type: null },
+    limit: { type: Number },
+    data: { type: null },
+    type: { type: String },
+  },
+  components: {},
+  data: () => ({
+    dialogVisible: false,
+    dialogImageUrl: '',
+    fileList: [],
+    fileUrl: '',
+  }),
+  created() {
+    if (this.data) {
+      this.defalutProcess(this.data);
+    }
+  },
+  watch: {
+    data: {
+      handler(val) {
+        this.defalutProcess(val);
+      },
+    },
+  },
+  computed: {},
+  methods: {
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    handleRemove(file) {
+      return true;
+    },
+    outLimit() {
+      this.$message.error('只允许上传1张头像');
+    },
+    onSuccess(response, file, fileList) {
+      this.fileUrl = response.uri;
+      //将文件整理好传回父组件
+      this.$emit('upload', { type: this.type, data: response });
+    },
+    defalutProcess(val) {
+      this.fileUrl = this.data;
+      this.$set(this, `fileList`, [{ name: this.type, url: this.data }]);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+/deep/.el-upload-list__item {
+  width: 5rem;
+  height: 5rem;
+}
+/deep/.el-upload.el-upload--picture-card {
+  width: 5rem;
+  height: 5rem;
+  line-height: 5rem;
+}
+</style>

src/views/index.vue

@@ -6,7 +6,7 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          主体
+          <upload :limit="1" :data="img_path" type="img_path" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
         </el-col>
         <el-col :span="24" class="foot">
           <footInfo></footInfo>
@@ -19,12 +19,14 @@
 <script>
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
+import upload from '@/components/upload.vue';
 export default {
   name: 'index',
   props: {},
   components: {
     NavBar,
     footInfo,
+    upload,
   },
   data: () => ({
     // 头部标题
@@ -33,10 +35,30 @@ export default {
     isleftarrow: '',
     // 返回
     navShow: true,
+    img_path: require('@/assets/logo.png'),
   }),
   created() {},
   computed: {},
-  methods: {},
+  methods: {
+    uploadSuccess({ type, data }) {
+      console.log(type, data);
+      // if (type !== 'img_path') {
+      //   let arr = _.get(this.uploads, type);
+      //   if (arr !== undefined) {
+      //     this.uploads[type].push({ name: data.name, uri: data.uri });
+      //   } else {
+      //     let newArr = [{ name: data.name, uri: data.uri }];
+      //     this.$set(this.uploads, `${type}`, newArr);
+      //   }
+      // } else {
+      //   this.picLoading = false;
+      //   this.$set(this.info, `${type}`, data.uri);
+      //   this.$nextTick(() => {
+      //     this.picLoading = true;
+      //   });
+      // }
+    },
+  },
   mounted() {
     this.title = this.$route.meta.title;
     this.isleftarrow = this.$route.meta.isleftarrow;

vue.config.js

@@ -25,9 +25,9 @@ module.exports = {
         onProxyReq(proxyReq, req, res) {
           proxyReq.setHeader('x-tenant', '99991');
         },
-        '/files': {
-          target: 'http://free.liaoningdoupo.com',
-        },
+      },
+      '/files': {
+        target: 'http://free.liaoningdoupo.com',
       },
     },
   },