修改form上传

src/components/publicPageForm/index.vue

@@ -200,10 +200,7 @@ export default {
     restForm () {
       this.$refs['ruleForm'].resetFields()
     },
-    // 新增/编辑-确认
-    submitClickHandler () {
-      let flag = false
-      const ndata = this.formItemArr.filter(item => item.datatype == 'password' || item.datatype == 'PASSWORD')
+    addTypePassWord (ndata = []) {
       if (ndata?.length) {
         const pubKeyStr = sessionStorage.getItem('pubKeyStr')
         if (!pubKeyStr) return
@@ -213,6 +210,22 @@ export default {
           this.tableForm[pagecode] = jse.encrypt(this.tableForm[pagecode].replace(/\s+/g, ""))
         })
       }
+    },
+    addTypeUpload (nload = []) {
+      if (nload?.length) {
+        const files = this.$refs['upload']
+        files.map((item, index) => {
+          if (item.imageUrl) this.tableForm[nload[index]['pagecode']] = item.imageUrl
+        })
+      }
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      let flag = false
+      const ndata = this.formItemArr.filter(item => item.datatype == 'password' || item.datatype == 'PASSWORD')
+      const nload = this.formItemArr.filter(item => item.datatype == 'upload' || item.datatype == 'UPLOAD')
+      if (nload?.length) this.addTypeUpload(nload)
+      if (ndata?.length) this.addTypePassWord(ndata)
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
           flag = true

src/components/publicPageForm/upload.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="form-upload">
-    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-      <img v-if="imageUrl" :src="imageUrl" class="avatar">
-      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-    </el-upload>
+    <input type="file" @change="previewFile()" /><br />
+    <img :src="imageUrl" height="200" alt="Image preview..." />
   </div>
 </template>
 
@@ -16,20 +14,31 @@ export default {
     };
   },
   methods: {
-    handleAvatarSuccess (res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-    },
     beforeAvatarUpload (file) {
-      const isJPG = file.type === 'image/jpeg';
+      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
       const isLt2M = file.size / 1024 / 1024 < 2;
 
       if (!isJPG) {
-        this.$message.error('上传头像图片只能是 JPG 格式!');
+        this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
+        return
       }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!');
+        return
       }
       return isJPG && isLt2M;
+    },
+    previewFile () {
+      const that = this
+      const file = document.querySelector("input[type=file]").files[0]
+      const reader = new FileReader()
+      if (file) {
+        if (!this.beforeAvatarUpload(file)) return
+        reader.readAsDataURL(file)
+        reader.onload = function (e) {
+          that.imageUrl = this.result
+        }
+      }
     }
   }
 }