图片上传完美了

ruoyi-ui/src/components/UploadImage/index.vue

@@ -13,8 +13,8 @@
       :headers="headers"
       style="display: inline-block; vertical-align: top"
     >
-      <img v-if="value" :src="value" class="avatar" />
+      <img v-if="value" :src="value|image" class="avatar" />
-      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+      <i v-else class="el-icon-plus avatar-uploader-icon" />
     </el-upload>
   </div>
 </template>
@@ -38,9 +38,14 @@ export default {
       default: "",
     },
   },
+  filters: {
+    image(value) {
+      return process.env.VUE_APP_BASE_API + "/common/file?fileName=" + value
+    }
+  },
   methods: {
     handleUploadSuccess(res) {
-      this.$emit("input", res.url);
+      this.$emit("input", res.fileName);
       this.loading.close();
     },
     handleBeforeUpload() {
@@ -58,7 +63,6 @@ export default {
       this.loading.close();
     },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
       this.$emit("input", '');
     },
   },

ruoyi-ui/src/components/UploadImageMultiple/index.vue

@@ -1,24 +1,11 @@
 <template>
   <div class="component-upload-image">
-    <!--    <el-upload-->
-    <!--      :action="uploadImgUrl"-->
-    <!--      list-type="picture-card"-->
-    <!--      :on-success="handleUploadSuccess"-->
-    <!--      :before-upload="handleBeforeUpload"-->
-    <!--      :on-error="handleUploadError"-->
-    <!--      name="file"-->
-    <!--      :show-file-list="false"-->
-    <!--      :headers="headers"-->
-    <!--      style="display: inline-block; vertical-align: top"-->
-    <!--    >-->
-    <!--      <img v-if="value" :src="value| image" class="avatar"/>-->
-    <!--      <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
-    <!--    </el-upload>-->
 
     <el-upload
       class="upload-demo"
       accept="image/*"
       :action="uploadImgUrl"
+      auto-upload
       :headers="headers"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
@@ -26,16 +13,21 @@
       :on-preview="handlePreview"
       :on-remove="handleRemove"
       name="file"
+      multiple
+      :limit="5"
       :file-list="fileList"
+      :on-exceed="handleExceed"
       list-type="picture">
+
       <el-button size="small" type="primary">点击上传</el-button>
-      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，最大限制5张</div>
     </el-upload>
   </div>
 </template>
 
 <script>
 import {getToken} from "@/utils/auth";
+import {Message} from "element-ui";
 
 export default {
   components: {},
@@ -45,6 +37,7 @@ export default {
       headers: {
         Authorization: "Bearer " + getToken(),
       },
+      fileList: [],
     };
   },
   props: {
@@ -59,17 +52,25 @@ export default {
     }
   },
   computed: {
-    fileList() {
 
-      return this.value.split(',').map(x => {
 
-        return process.env.VUE_APP_BASE_API + "/common/file?fileName=" + x
+
-      })
-    }
   },
   methods: {
-    handleUploadSuccess(res) {
+    handleUploadSuccess(res, file, fileList) {
-      this.$emit("input", res.fileName);
+
+
+      fileList = fileList.filter(x => x.response)
+
+      let temp = fileList.map(x => {
+        return  x.response.fileName
+      })
+
+      let result = temp.join(',')
+
+      console.log(result)
+
+      this.$emit("input", result);
       this.loading.close();
     },
     handleBeforeUpload() {
@@ -87,10 +88,23 @@ export default {
       this.loading.close();
     },
     handleRemove(file, fileList) {
-      console.log(file, fileList);
+      let temp = fileList.map(x => {
+        return  x.response.fileName
+      })
+
+      let result = temp.join(',')
+      this.$emit("input",result);
     },
     handlePreview(file) {
       console.log(file);
+    },
+    handleExceed(file,fileList) {
+      Message({
+        message: "超出上传数量限制",
+        type: 'error'
+      })
+
+
     }
   },
   watch: {},