社团图片上传多张

ruoyi-ui/README.md

@@ -7,7 +7,7 @@ git clone https://gitee.com/y_project/RuoYi-Vue
 
 # 进入项目目录
 cd ruoyi-ui
-
+__
 # 安装依赖
 npm install
 

ruoyi-ui/src/views/smartSchool/massOrganization/communityStyle/index.vue

+<!--社团风采-->
 <template>
   <div class="app-container">
     <el-form
@@ -62,7 +63,7 @@
       <el-table-column label="风采主题" align="center" prop="theme" />
       <el-table-column label="附件" align="center" prop="file">
         <template slot-scope="scope">
-          <el-image style="width: 100px; height: 100px" :src="scope.row.file">
+          <el-image v-for="(item,index) in scope.row.file.split(',')" :key="index" style="width: 100px; height: 100px" :src="item" :preview-src-list="[item]">
           </el-image>
         </template>
       </el-table-column>
@@ -137,17 +138,21 @@
           "
         >
           <el-upload
+            multiple
             v-loading="uploadLoading"
             class="avatar-uploader"
-            action="#"
+            :action="uploadFileUrl"
             accept="image/*"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload"
-            :http-request="uploadImage"
           >
-            <img v-if="form.file" :src="form.file" class="avatar" />
+<!--            <img v-for="(item,index) in form.file" :key="index" v-if="form.file" :src="item" class="avatar" />-->
+            <div v-if="form.file">
+              <img v-for="(item,index) in form.file" :key="index" :src="item" class="avatar" />
+            </div>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+
           </el-upload>
         </el-form-item>
 
@@ -191,6 +196,9 @@ export default {
   components: { picAvatar },
   data() {
     return {
+      //图片上传列表
+      uploadList: [],
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
       pev: process.env.VUE_APP_BASE_API,
       // 输入框字数限制
       TEXT_SIZE,
@@ -313,10 +321,9 @@ export default {
       };
       //   console.log(params);
       getCommunityInfo(params).then((response) => {
-        // console.log("response", response);
+        console.log("response", response);
         this.picList = response.rows;
-        this.picList.file = response.rows.file;
-        // console.log(this.picList.file);
+        // this.picList.file = response.rows.file.split(',');
         this.total = response.total;
         this.loading = false;
       });
@@ -369,8 +376,10 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
+      this.uploadList = []
       this.check = false;
       this.reset();
+      console.log('form.file',this.form.file)
       this.open = true;
       this.title = "新增社团风采";
     },
@@ -378,22 +387,31 @@ export default {
     handleUpdate(row) {
       this.reset();
       const ids = row.id || this.ids;
+      this.uploadList = []
+      this.form.file = []
       listCommunityInfo(ids).then((response) => {
+        console.log('修改',response)
         this.form = response.data;
+        this.form.file = response.data.file.split(',')
+        console.log("this.form.file", this.form.file);
+
         this.imageUrl = this.pev + this.form.picUrl;
-        console.log(this.imageUrl, "this.imageUrl");
         this.open = true;
         this.title = "修改园区照片";
       });
     },
     /** 查看按钮操作 */
     handleCheck(row) {
+      this.uploadList = []
+      this.form.file = []
       this.check = true;
       this.open = true;
       const ids = row.id || this.ids;
       listCommunityInfo(ids).then((response) => {
+        console.log('查看',response)
         this.form = response.data;
-        this.form.file = response.data.file;
+        console.log('this.form.file',this.form.file)
+        this.form.file = response.data.file.split(',');
         console.log(this.form.file);
         this.open = true;
       });
@@ -401,9 +419,19 @@ export default {
     },
     // 上传成功回调
     handleAvatarSuccess(res, file) {
-      this.imageUrl = res.data.url;
-      console.log(file);
-      this.commonUpload(file);
+
+      console.log('Success res',res)
+      console.log('Success file',file)
+      if(res.code == 200){
+        this.uploadList.push( this.pev + res.fileName );
+        this.form.file = this.uploadList
+        console.log('this.uploadList',this.uploadList)
+        console.log('this.form.file',this.form.file)
+      }
+
+      // this.imageUrl = res.data.url;
+      // console.log(file);
+      // this.commonUpload(file);
     },
     // 上传前格式和图片大小限制
     beforeAvatarUpload(file) {
@@ -427,6 +455,7 @@ export default {
     },
     // 上传图片
     uploadImage(file) {
+      console.log('file',file)
       const fileData = file.file;
       const formData = new FormData();
       formData.append("file", fileData);
@@ -454,7 +483,8 @@ export default {
             const params = {
               id: this.form.id,
               theme: this.form.theme,
-              file: this.form.file,
+              // file: this.form.file,
+              file:this.uploadList.toString()
             };
             console.log(params, "params");
             editCommunityInfo(params)
@@ -469,7 +499,7 @@ export default {
             const params = {
               cid: this.$route.query.id,
               theme: this.form.theme,
-              file: this.form.file,
+              file:this.uploadList.toString()
             };
             console.log(params, "params");
             addCommunityInfo(params)

ruoyi-ui/vue.config.js

@@ -44,10 +44,10 @@ module.exports = {
         //target: ` http://43.143.63.140:8848`,
         //target: ` http://43.143.63.140:8095`,
         //部署时后端地址
-        //target: `http://47.105.176.202:8137`,
+        target: `http://47.105.176.202:5131`,
         //学校内网
         // target: `http://10.20.100.201:57321`,
-        target: `http://47.105.176.202:5112`,
+        // target: `http://47.105.176.202:5112`,
         // target: `http://192.168.1.113:8848`,
 
         changeOrigin: true,