修改

src/views/postManage/postList.vue

@@ -67,6 +67,16 @@
                         </el-option>
                     </el-select>
                 </el-form-item>
+                <el-form-item style="width: 800px" label="图片" prop="media">
+                    <el-tooltip content="建议图片宽高比120*80" placement="top-start">
+                        <el-upload :action="fileImgUrl" list-type="picture-card" :file-list="dataForm.mediaFiles" :limit="1"
+                            :on-success="handleGallerySucess" :on-exceed="handleExceed" :before-upload="uploadBannerImg"
+                            :on-remove="handleRemove">
+                            <i class="el-icon-plus"></i>
+                        </el-upload>
+                    </el-tooltip>
+                    
+                </el-form-item>
                 <el-form-item label="积分" prop="integral">
                     <el-input-number style="width: 100%" :min="1" :step="1" v-model="dataForm.integral"></el-input-number>
                 </el-form-item>
@@ -153,6 +163,7 @@ export default {
     directives: { waves },
     data() {
         return {
+            fileImgUrl: this.upLoadUrl,
             qesType:'',
             qesTypeList:[
                 {
@@ -293,6 +304,8 @@ export default {
             dataForm: {
                 title: '',
                 type: '',
+                media: '',
+                mediaFiles: [],
                 integral: '',
                 deadline: '',
                 participants: [],
@@ -308,6 +321,7 @@ export default {
             rules: {
                 title: [{ required: true, message: "请填写标题", trigger: "blur" }],
                 type: [{ required: true, message: "请选择类型", trigger: "blur" }],
+                media: [{ required: true, message: "图片不能为空", trigger: "blur" }],
                 integral: [{ required: true, message: "请填写积分", trigger: "blur" }],
                 deadline: [{ required: true, message: "请选择截止日期", trigger: "blur" }],
                 content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
@@ -320,6 +334,44 @@ export default {
         this.getList();
     },
     methods: {
+        handleRemove(file, fileList) {
+            console.log(file, fileList);
+            let mediaFiles = [];
+            for (let i in fileList) {
+                let response = fileList[i].response;
+                let url = response.data.url;
+                mediaFiles.push(url);
+                this.dataForm.media = mediaFiles.join(",");
+            }
+        },
+        uploadBannerImg(file) {
+            const isJPGs = file.type === "image/jpeg";
+            console.log(isJPGs);
+        },
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件！，共选择了 ${files.length + fileList.length
+                } 个文件`
+            );
+        },
+        handleGallerySucess(res, file, fileList) {
+            this.dataForm.media = ""; // 清空画廊图片数组
+
+            let mediaFiles = [];
+            for (let i in fileList) {
+                let response = fileList[i].response;
+                if (response.errno && response.errno != "0") {
+                    this.$message.error("该图片上传失败,已被移除,请重新上传!");
+                    // 上传失败移除该 file 对象
+                    fileList.splice(i, 1);
+                } else {
+                    let url = response.data.url;
+                    mediaFiles.push(url);
+                }
+            }
+
+            this.dataForm.media = mediaFiles.join(",");
+        },
         //改变类型
         changeType(val){
             if(val==5){
@@ -393,6 +445,8 @@ export default {
             this.dataForm = {
                 title: '',
                 type: '',
+                media: '',
+                mediaFiles: [],
                 integral: '',
                 deadline: '',
                 participants: [],
@@ -458,8 +512,25 @@ export default {
             getDetailInfo({postId:row.id}).then(response => {
                 this.dataForm = response.data.data;
                 this.dataForm.questions = response.data.data.data;
+                if (this.dataForm.media) {
+                    let mediaFiles = this.dataForm.media.split(",");
+                    this.dataForm.mediaFiles = [];
+                    for (let i in mediaFiles) {
+                        let url = mediaFiles[i];
+                        let name = "image_" + i;
+
+                        this.dataForm.mediaFiles.push({
+                            name: name,
+                            url: url,
+                            response: { error: "0", data: { url: url } },
+                        });
+                    }
+                }
                 this.dialogStatus = 'update'
                 this.dialogFormVisible = true
+                this.$nextTick(() => {
+                    this.$refs["dataForm"].clearValidate();
+                });
             }).catch(() => {})
         },
         updateData() {