新增文章图集功能

src/views/content/article/edit.vue

@@ -50,6 +50,14 @@
               <template v-slot:tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
             </UploadImg>
         </el-form-item>
+        <el-form-item
+            label="文章图集"
+            prop="imagesList"
+            :rules="{ required: true,message: '请上传文章图集', trigger: 'change' }"
+          >
+          <UploadImgs @upload="fileUploads" file-type=".jpeg,.png,.jpg,.gif" name="article" 
+          :fileSize="200" :multiple="true" :fileList="formData.fileList"/>
+        </el-form-item>
         <el-form-item label="导读" prop="intro" :rules="{ required: true, message: '请输入导读', trigger: 'blur' }">
           <el-input  placeholder="请输入" v-model="formData.intro" type="textarea"></el-input>
         </el-form-item>
@@ -81,6 +89,7 @@ import {computed, onMounted,ref,shallowRef,reactive  } from "vue";
 import {FormInstance} from "element-plus";
 const formRef = shallowRef<FormInstance>();
 import UploadImg from "@/components/Upload/Image.vue";
+import UploadImgs from '@/components/Upload/Images.vue';
 import {useLockFn} from "@/utils/useLockFn";
 import Editor from '@/components/Editor/tinymce.vue'
 import {message,buildTree} from "@/utils/auth";
@@ -116,11 +125,15 @@ const formData = reactive({
   title: "",
   author: "",
   cover:'',
+  images: '',
   intro:'',
   content:'',
   status:0,
   click:'',
-  sort:0
+  sort:0,
+  imagesList:[],
+  filePath:'',
+  fileList:[],
 });
 
 const dialogClose = () => {
@@ -135,12 +148,29 @@ const setFormData = async (row: any) => {
     }
   }
   editorRef.value.myValue=formData.content
+  // 文章图集
+  if (formData.imagesList) {
+    formData.imagesList.map(item=>{
+      formData.fileList.push({
+        filePath:item
+      })
+    })
+  }
 };
 
 const editorRef=ref()
 
+const fileUploads = (list: any) => {
+  formData.fileList = list
+};
+
 const handleSubmit = async () => {
   await formRef.value?.validate();
+  // 文章图集处理，多个图片逗号分割
+  formData.images =''
+  formData.fileList.map((item,index)=>{
+    formData.images+=`${item.filePath}${index<formData.fileList.length-1?',':''}`
+  })
   let ruleForm = JSON.parse(JSON.stringify(formData));
   ruleForm.content=editorRef.value.myValue
   if (!ruleForm.content) {