优化图片上传

src/views/modules/communityParty/article/drafts.vue

@@ -365,7 +365,7 @@ export default {
 
   methods: {
     async handleClickDraft(fmData) {
-      let url = this.addUrl;
+      let url = '/gov/voice/article/addOrSaveDraft';
       let params = {
         ...fmData,
         type: "draft",

src/views/modules/communityParty/orgActivity/activivityList/addActivity.vue

@@ -154,6 +154,7 @@
                      accept=".doc,.pdf,.xls,.docx,.xlsx,.jpg,.png,.jpeg,.bmp,.mp4,.wma,.m4a,.mp3"
                      :on-success="handleFileSuccess"
                      :on-remove="handleFileRemove"
+                     :on-preview="item => handlePreview(item.url)"
                      :limit="3"
                      :before-upload="beforeUpload"
                      :file-list="fileList">
@@ -585,6 +586,14 @@ export default {
     },
 
     
+    handlePreview(src) {
+      console.log(src)
+      if(src){
+        window.open(src);
+      }
+    },
+
+
     beforeUpload (file) {
       const array = file.name.split('.')
       const extension = array[array.length - 1]

src/views/modules/worklog/icworklog-add-or-update.vue

@@ -1,8 +1,21 @@
 <template>
-  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : formType==='detail' ? '查看' : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+  <el-dialog
-    <el-form :model="dataForm" :disabled="formType==='detail'" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+    :visible.sync="visible"
-        <el-form-item label="所属网格"
+    :title="
-                      prop="gridId">
+      !dataForm.id ? $t('add') : formType === 'detail' ? '查看' : $t('update')
+    "
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form
+      :model="dataForm"
+      :disabled="formType === 'detail'"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmitHandle()"
+      :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'"
+    >
+      <el-form-item label="所属网格" prop="gridId">
         <el-select
           v-model.trim="dataForm.gridId"
           placeholder="请选择"
@@ -22,14 +35,18 @@
         <el-input v-model="dataForm.title" placeholder="标题"></el-input>
       </el-form-item>
       <el-form-item label="日志类型" prop="logType">
-              <el-select v-model="dataForm.logType"
+        <el-select
+          v-model="dataForm.logType"
           placeholder="请选择"
           size="small"
-                         clearable>
+          clearable
-                  <el-option v-for="item in logTypeArr"
+        >
+          <el-option
+            v-for="item in logTypeArr"
             :key="item.value"
             :label="item.label"
-                             :value="item.value">
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -39,14 +56,24 @@
           format="yyyy-MM-dd"
           value-format="yyyy-MM-dd"
           type="date"
-                      placeholder="选择日期">
+          placeholder="选择日期"
+        >
         </el-date-picker>
       </el-form-item>
       <el-form-item label="内容" prop="content">
-          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5 }" v-model="dataForm.content" placeholder="内容"></el-input>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 3, maxRows: 5 }"
+          v-model="dataForm.content"
+          placeholder="内容"
+        ></el-input>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
-          <el-input type="textarea" v-model="dataForm.remark" placeholder="备注"></el-input>
+        <el-input
+          type="textarea"
+          v-model="dataForm.remark"
+          placeholder="备注"
+        ></el-input>
       </el-form-item>
       <!-- <el-form-item class="block"
                       label="照片"
@@ -69,151 +96,201 @@
             </el-upload>
         </el-form-item> -->
 
-        <el-form-item label="照片"
+      <el-form-item label="照片" style="display: block">
-                        style="display:block">
+        <el-upload
-            <el-upload :headers="$getElUploadHeaders()"  :class="['avatar-uploader', {'hide': hideUploadBtn}] "
+          :headers="$getElUploadHeaders()"
+          :class="['avatar-uploader', { hide: hideUploadBtn }]"
           ref="uploadPic"
           :action="uploadUlr"
           list-type="picture-card"
+          accept=""
+          :before-upload="(file) => beforeImgUpload(file, item)"
           :on-exceed="exceedPic"
           :on-remove="removePic"
           :file-list="dataForm.fileList"
           :on-change="handleEditChange"
           :on-success="handleSuccess"
-                       :limit="3">
+          :limit="3"
+        >
           <span class="font-14">选择图片</span>
-              <div slot="tip"
+          <div slot="tip" class="upload_tip">
-                   class="upload_tip">最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式</div>
+            最多上传3张图片，图片支持jpg、jpeg、bmp、git或png格式
+          </div>
         </el-upload>
       </el-form-item>
     </el-form>
     <template slot="footer" v-if="formType != 'detail'">
-      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
-      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{
+        $t("confirm")
+      }}</el-button>
     </template>
   </el-dialog>
 </template>
 
 <script>
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
-import { requestPost } from "@/js/dai/request"
+import { requestPost } from "@/js/dai/request";
 export default {
   data() {
     return {
-      formType: '',
+      formType: "",
       visible: false,
       gridState: true,
-      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',
+      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
       logTypeArr: [],
       optionsG: [],
       dataForm: {
-        id: '',
+        id: "",
-        agencyId: '',
+        agencyId: "",
-        pids: '',
+        pids: "",
-        gridId: '',
+        gridId: "",
-        title: '',
+        title: "",
-        logType: '',
+        logType: "",
-        logDate: '',
+        logDate: "",
-        content: '',
+        content: "",
-        remark: '',
+        remark: "",
-        mobile: '',
+        mobile: "",
         fileList: [],
         // imageList: [],//	图片集合
       },
-      hideUploadBtn: false
+      hideUploadBtn: false,
-    }
+    };
   },
   created() {
-    this.getCategrayList()
+    this.getCategrayList();
   },
   computed: {
     dataRule() {
       return {
         title: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         logType: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         logDate: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
         ],
         content: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
-        ]
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur",
+          },
+        ],
+      };
+    },
+  },
+  methods: {
+    beforeImgUpload(file, item) {
+      console.log(file);
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      const srcType = file.type;
+
+      if (!isLt1M) {
+        this.$message.error("上传文件大小不能超过 10MB!");
+        return false;
       }
+      if (srcType.indexOf("image") == -1) {
+        this.$message.error("仅限图片格式");
+        return false;
       }
+      return true;
     },
-  methods: {
+
     init() {
-      this.visible = true
+      this.visible = true;
-      this.getGridList()
+      this.getGridList();
       this.$nextTick(() => {
-        this.$refs['dataForm'].resetFields()
+        this.$refs["dataForm"].resetFields();
-        this.dataForm.fileList = []
+        this.dataForm.fileList = [];
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 获取信息
     getInfo() {
-      this.$http.get(`/gov/org/icWorkLog/${this.dataForm.id}`).then(({ data: res }) => {
+      this.$http
+        .get(`/gov/org/icWorkLog/${this.dataForm.id}`)
+        .then(({ data: res }) => {
           if (res.code !== 0) {
-          return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           }
           this.dataForm = {
             ...this.dataForm,
-          ...res.data
+            ...res.data,
-        }
+          };
-
+
-        const grid = this.optionsG.filter(item => item.gridId === res.data.gridId)
+          const grid = this.optionsG.filter(
-        if (grid.length < 1 && res.data.gridId !== '') {
+            (item) => item.gridId === res.data.gridId
-          this.gridState = false
+          );
-          this.optionsG.push({gridName:res.data.gridName, gridId:res.data.gridId, disabled: true})
+          if (grid.length < 1 && res.data.gridId !== "") {
+            this.gridState = false;
+            this.optionsG.push({
+              gridName: res.data.gridName,
+              gridId: res.data.gridId,
+              disabled: true,
+            });
           } else {
-          this.gridState = true
+            this.gridState = true;
           }
 
-        const { id } = this.$store.state.user
+          const { id } = this.$store.state.user;
-        if (this.dataForm.createdBy == id) { // 是本人可以修改
+          if (this.dataForm.createdBy == id) {
-          this.formType = 'update'
+            // 是本人可以修改
-        } else { // 不是本人只能查看
+            this.formType = "update";
-          this.formType = 'detail'
+          } else {
+            // 不是本人只能查看
+            this.formType = "detail";
           }
-      }).catch(() => {})
+        })
+        .catch(() => {});
     },
     // 字典
     async getCategrayList() {
-      console.log(localStorage.getItem('token'))
+      console.log(localStorage.getItem("token"));
-      const url = "/sys/dict/data/dictlist"
+      const url = "/sys/dict/data/dictlist";
 
       let params = {
-        dictType: 'log_type'
+        dictType: "log_type",
-      }
+      };
 
-      const { data, code, msg } = await requestPost(url, params)
+      const { data, code, msg } = await requestPost(url, params);
 
       if (code === 0) {
-        this.logTypeArr = data
+        this.logTypeArr = data;
       } else {
-        this.$message.error(msg)
+        this.$message.error(msg);
       }
     },
     getGridList() {
       this.$http
-        .post('/gov/mine/agency/getmygrids')
+        .post("/gov/mine/agency/getmygrids")
         .then(({ data: res }) => {
           if (res.code !== 0) {
-            return this.$message.error(res.msg)
+            return this.$message.error(res.msg);
           } else {
-            console.log('获取查询详情成功', res.data)
+            console.log("获取查询详情成功", res.data);
-            this.optionsG = res.data
+            this.optionsG = res.data;
           }
         })
         .catch(() => {
-          return this.$message.error('网络错误')
+          return this.$message.error("网络错误");
-        })
+        });
     },
     // beforeUpload (file) {
     //   const array = file.name.split('.')
@@ -276,93 +353,99 @@ export default {
     //   a.href = file.url;
     //   a.dispatchEvent(event);
 
-
     // },
 
     exceedPic() {
-      this.$message.warning("最多上传3张预览图片")
+      this.$message.warning("最多上传3张预览图片");
-
     },
     removePic(file, fileList) {
-
       // this.formData.imageList.splice(this.formData.imageList.findIndex(item => item === file.url), 1)
       if (file && file.status === "success") {
-        this.dataForm.fileList.splice(this.dataForm.fileList.findIndex(item => item.uid === file.uid), 1)
+        this.dataForm.fileList.splice(
+          this.dataForm.fileList.findIndex((item) => item.uid === file.uid),
+          1
+        );
       }
       this.hideUploadBtn = fileList.length >= 3;
-
     },
     handleSuccess(res, file) {
-      if (res.code === 0 && res.msg === 'success') {
+      if (res.code === 0 && res.msg === "success") {
-          const array = file.name.split('.')
+        const array = file.name.split(".");
-          const fileType = array[array.length - 1]
+        const fileType = array[array.length - 1];
 
-          const picArray = ['jpg', 'png', 'jpeg', 'bmp']
+        const picArray = ["jpg", "png", "jpeg", "bmp"];
-          const videoarray = ['mp4', 'wma', 'm4a']
+        const videoarray = ["mp4", "wma", "m4a"];
-          const docArray = ['doc', 'docx', 'xls', 'xlsx', 'pdf']
+        const docArray = ["doc", "docx", "xls", "xlsx", "pdf"];
-          const mp3Array = ['mp3']
+        const mp3Array = ["mp3"];
 
         if (picArray.indexOf(fileType) > -1) {
-            file.attachmentFormat = 'image'
+          file.attachmentFormat = "image";
         } else if (videoarray.indexOf(fileType) > -1) {
-            file.attachmentFormat = 'video'
+          file.attachmentFormat = "video";
         } else if (docArray.indexOf(fileType) > -1) {
-            file.attachmentFormat = 'doc'
+          file.attachmentFormat = "doc";
         } else if (mp3Array.indexOf(fileType) > -1) {
-            file.attachmentFormat = 'voice'
+          file.attachmentFormat = "voice";
         }
 
-          file.url = res.data.url
+        file.url = res.data.url;
-          file.type = fileType
+        file.type = fileType;
-
-          file.fileName = file.name
-          file.fileType = file.type
 
-          this.dataForm.fileList.push(file)
+        file.fileName = file.name;
-          console.log(this.dataForm.fileList)
+        file.fileType = file.type;
-        } else this.$message.error(res.msg)
 
+        this.dataForm.fileList.push(file);
+        console.log(this.dataForm.fileList);
+      } else this.$message.error(res.msg);
     },
     // 最多上传3张图，超过时隐藏上传按钮
     handleEditChange(file, fileList) {
-
       this.hideUploadBtn = fileList.length >= 3;
     },
     // 表单提交
-    dataFormSubmitHandle: debounce(function () {
+    dataFormSubmitHandle: debounce(
+      function () {
         if (!this.gridState) {
-        this.dataForm.gridId = ''
+          this.dataForm.gridId = "";
-        this.gridState = true
+          this.gridState = true;
-        return this.$message.error("请重新选择网格")
+          return this.$message.error("请重新选择网格");
         }
         if (this.dataForm.content.length < 70) {
-        return this.$message.error("内容不能少于70字")
+          return this.$message.error("内容不能少于70字");
         }
         if (this.dataForm.fileList.length < 1) {
-        return this.$message.error("照片不能为空")
+          return this.$message.error("照片不能为空");
         }
-      this.$refs['dataForm'].validate((valid) => {
+        this.$refs["dataForm"].validate((valid) => {
           if (!valid) {
-          return false
+            return false;
           }
-        this.$http[!this.dataForm.id ? 'post' : 'put']('/gov/org/icWorkLog/', this.dataForm).then(({ data: res }) => {
+          this.$http[!this.dataForm.id ? "post" : "put"](
+            "/gov/org/icWorkLog/",
+            this.dataForm
+          )
+            .then(({ data: res }) => {
               if (res.code !== 0) {
-            return this.$message.error(res.msg)
+                return this.$message.error(res.msg);
               }
               this.$message({
-            message: this.$t('prompt.success'),
+                message: this.$t("prompt.success"),
-            type: 'success',
+                type: "success",
                 duration: 500,
                 onClose: () => {
-              this.visible = false
+                  this.visible = false;
-              this.$emit('refreshDataList')
+                  this.$emit("refreshDataList");
-            }
+                },
-          })
+              });
-        }).catch(() => {})
             })
-    }, 1000, { 'leading': true, 'trailing': false })
+            .catch(() => {});
-  }
+        });
-}
+      },
+      1000,
+      { leading: true, trailing: false }
+    ),
+  },
+};
 </script>
 
 <style lang="scss" scoped>