zd 社团活动记录多图片上传

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

@@ -67,7 +67,13 @@
       <el-table-column label="备注" align="center" prop="remark" />
       <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>
@@ -214,16 +220,24 @@
               "
             >
               <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" />
+                <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>
@@ -257,6 +271,10 @@ 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,
@@ -334,17 +352,6 @@ export default {
           },
         ],
       },
-      //设置table列隐藏与显示
-      columns: [
-        { key: 0, label: `园区照片`, visible: true },
-        { key: 1, label: `相片名称`, visible: true },
-        // {key: 2, label: `相片路径`, visible: true},
-        { key: 2, label: `排序`, visible: true },
-        { key: 3, label: `备注`, visible: true },
-        { key: 4, label: `创建者`, visible: true },
-        { key: 5, label: `创建时间`, visible: true },
-        { key: 6, label: `操作`, visible: true },
-      ],
       // 作为临时图片展示
       tempImage: "",
       // 导出选项
@@ -439,7 +446,8 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.check = false;
+      this.uploadList = [];
+
       this.reset();
       this.open = true;
       this.title = "新增社团活动记录";
@@ -448,8 +456,14 @@ export default {
     handleUpdate(row) {
       this.reset();
       const ids = row.id || this.ids;
+      this.uploadList = [];
+      this.form.file = [];
+
       listClubInfo(ids).then((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;
@@ -460,10 +474,16 @@ export default {
     handleCheck(row) {
       this.check = true;
       this.open = true;
+      this.uploadList = [];
+      this.form.file = [];
+
       const ids = row.id || this.ids;
       listClubInfo(ids).then((response) => {
         this.form = response.data;
-        this.form.file = response.data.file;
+        // 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;
       });
@@ -471,9 +491,21 @@ export default {
     },
     // 上传成功回调
     handleAvatarSuccess(res, file) {
-      this.imageUrl = res.data.url;
-      console.log(file);
-      this.commonUpload(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) {
@@ -524,7 +556,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");
             editClubInfo(params)
@@ -543,7 +576,9 @@ export default {
               endTime: this.form.endTime,
               fzr: this.form.fzr,
               orgName: this.form.orgName,
-              file: this.form.file,
+              //   file: this.form.file,
+              file: this.uploadList.toString(),
+
               remark: this.form.remark,
             };
             console.log(params, "params");