update 租户后台 上传图片改为素材库选取

src/components/ImageUpload/index.vue

@@ -1,298 +1,99 @@
 <template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <!-- 上传提示 -->
-<!--    <div class="el-upload__tip" slot="tip" v-if="showTip">
-      请上传
-      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
-    </div> -->
-
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
+  <div class="component-upload-image" :class="{ 'is-disabled': disabled }">
+    <MaterialSingle
+      v-if="imageLimit <= 1"
+      :value="singleUrl"
+      type="image"
+      :num="1"
+      :width="width"
+      :height="height"
+      :allow-upload="allowUpload"
+      @input="handleSingleInput"
+    />
+    <MaterialMulti
+      v-else
+      :value="urlArray"
+      type="image"
+      :num="imageLimit"
+      :width="width"
+      :height="height"
+      :allow-upload="allowUpload"
+      @input="handleMultiInput"
+    />
   </div>
 </template>
 
 <script>
-import { getToken } from "@/utils/auth";
-
-import { Loading } from 'element-ui';
+import MaterialSingle from '@/components/Material/single'
+import MaterialMulti from '@/components/Material/index'
 
 export default {
+  name: 'ImageUpload',
+  components: { MaterialSingle, MaterialMulti },
   props: {
     value: [String, Object, Array],
-    // 图片数量限制
+    /** 最多选取张数；兼容旧 prop num */
     limit: {
       type: Number,
-      default: 10,
+      default: 10
+    },
+    num: {
+      type: Number,
+      default: undefined
+    },
+    width: {
+      type: Number,
+      default: 148
     },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-      default: 500,
+    height: {
+      type: Number,
+      default: 148
     },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
+    disabled: {
+      type: Boolean,
+      default: false
     },
-    // 是否显示提示
-    isShowTip: {
+    /** 素材库弹窗内是否允许上传新素材 */
+    allowUpload: {
       type: Boolean,
       default: true
-    }
-  },
-  data() {
-    return {
-      finalQuality:1,
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl: process.env.VUE_APP_BASE_API,
-      uploadImgUrl: process.env.VUE_APP_BASE_API+"/common/uploadOSS", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
+    },
+    // 以下保留兼容，不再使用
+    fileSize: Number,
+    fileType: Array,
+    isShowTip: Boolean,
+    type: String
   },
   computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
+    imageLimit() {
+      return this.num != null ? this.num : this.limit
     },
+    singleUrl() {
+      if (!this.value) return ''
+      if (Array.isArray(this.value)) return this.value[0] || ''
+      return String(this.value).split(',').filter(Boolean)[0] || ''
+    },
+    urlArray() {
+      if (!this.value) return []
+      if (Array.isArray(this.value)) return this.value.filter(Boolean)
+      return String(this.value).split(',').filter(Boolean)
+    }
   },
   methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
+    handleSingleInput(url) {
+      this.$emit('input', url || '')
     },
-    // 上传成功回调
-    handleUploadSuccess(res) {
-      console.log(res)
-      this.fileList.push({ name: res.url, url: res.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$message.error(
-          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-        );
-        return false;
-      }
-      return new Promise((resolve, reject) => {
-        if (file.size / 1024 / 1024 > 3) {
-          this.$message.error('上传的图片不能超过3MB');
-          reject();
-          return;
-        }
-        if (file.size / 1024 / 1024 > 1) {
-          const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
-          // 文件大于1MB时进行压缩
-          this.compressImage(file).then((compressedFile) => {
-            loadingInstance.close();
-            if (compressedFile.size / 1024 > 500) {
-              this.$message.error('图片压缩后仍大于500KB');
-              reject();
-            } else {
-              // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`最终内存大小为: ${(compressedFile.size/1024).toFixed(2)}KB`);
-              resolve(compressedFile);
-            }
-          }).catch((err) => {
-            loadingInstance.close();
-            console.error(err);
-            reject();
-          });
-        } else {
-          resolve(file);
-        }
-        this.loading = this.$loading({
-          lock: true,
-          text: "上传中",
-          background: "rgba(0, 0, 0, 0.7)",
-        });
-      });
-      // if (this.fileSize) {
-      //   const isLt = file.size / 1024  < this.fileSize;
-      //   if (!isLt) {
-      //     this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} KB!`);
-      //     return false;
-      //   }
-      // }
-      
-    },
-    compressImage(file) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (event) => {
-          const img = new Image();
-          img.src = event.target.result;
-          img.onload = () => {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            const width = img.width;
-            const height = img.height;
-            canvas.width = width;
-            canvas.height = height;
-            ctx.drawImage(img, 0, 0, width, height);
-
-            let quality = 1; // 初始压缩质量
-            let dataURL = canvas.toDataURL('image/jpeg', quality);
-            
-            // 逐步压缩，直到图片大小小于500KB并且压缩质量不再降低
-            while (dataURL.length / 1024 > 500 && quality > 0.1) {
-              quality -= 0.01;
-              dataURL = canvas.toDataURL('image/jpeg', quality);
-            }
-            this.finalQuality = quality; // 存储最终的压缩质量
-            
-            if (dataURL.length / 1024 > 500) {
-              reject(new Error('压缩后图片仍然大于500KB'));
-              return;
-            }
-
-            const arr = dataURL.split(',');
-            const mime = arr[0].match(/:(.*?);/)[1];
-            const bstr = atob(arr[1]);
-            let n = bstr.length;
-            const u8arr = new Uint8Array(n);
-            while (n--) {
-              u8arr[n] = bstr.charCodeAt(n);
-            }
-            const compressedFile = new Blob([u8arr], { type: mime });
-            compressedFile.name = file.name;
-            resolve(compressedFile);
-          };
-          img.onerror = (error) => {
-            reject(error);
-          };
-        };
-        reader.onerror = (error) => {
-          reject(error);
-        };
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      console.log(file)
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    handleMultiInput(arr) {
+      const list = Array.isArray(arr) ? arr.filter(Boolean) : []
+      this.$emit('input', list.join(','))
     }
   }
-};
-</script>
-<style scoped lang="scss">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
 }
+</script>
 
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
+<style scoped lang="scss">
+.is-disabled {
+  pointer-events: none;
+  opacity: 0.6;
 }
 </style>
-

src/components/Material/index.vue

@@ -71,11 +71,14 @@
                 </el-col>
                 <el-col :span="12" style="text-align: right;">
                   <el-upload
+                    v-if="allowUpload"
                     :action="uploadUrl"
+                    :headers="uploadHeaders"
                     :file-list="[]"
                     :on-progress="handleProgress"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
+                    :on-error="handleUploadError"
                     :data="{type: 1}"
                     multiple
                   >
@@ -142,6 +145,7 @@
 <script>
 import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial, exportMaterial } from "@/api/store/material";
 import { getAllMaterialGroup,listMaterialGroup, getMaterialGroup, delMaterialGroup, addMaterialGroup, updateMaterialGroup, exportMaterialGroup } from "@/api/store/materialGroup";
+import { getUploadHeaders } from '@/utils/uploadHeaders'
 import { Loading } from 'element-ui';
 export default {
   name: 'ImageSelect',
@@ -177,6 +181,15 @@ export default {
       default() {
         return 150
       }
+    },
+    allowUpload: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    uploadHeaders() {
+      return getUploadHeaders()
     }
   },
   data() {
@@ -269,8 +282,10 @@ export default {
     getAllMaterialGroup() {
       this.materialGroupLoading = true;
       getAllMaterialGroup({}).then(response => {
-        this.materialGroupList = response.data
-        console.log(this.materialGroupList)
+        this.materialGroupList = response.data || []
+        if (this.materialGroupList.length && !this.queryParams.groupId) {
+          this.selectGroup(this.materialGroupList[0])
+        }
         this.materialGroupLoading = false;
       });
     },
@@ -330,13 +345,22 @@ export default {
     },
     handleProgress(event, file, fileList) {
     },
+    handleUploadError() {
+      this.$message.error('图片上传失败')
+      this.resultNumber = 0
+    },
     handleSuccess(response, file, fileList) {
       const that = this
+      const url = response.url || (response.data && response.data.url)
+      if (!url) {
+        this.$message.error(response.msg || '上传失败，未返回图片地址')
+        return
+      }
       addMaterial({
         type: '1',
         groupId: this.queryParams.groupId,
         name: file.name,
-        url: response.url
+        url: url
       }).then(() => {
         this.resultNumber++
         if (fileList.length === this.resultNumber) {
@@ -346,6 +370,10 @@ export default {
       })
     },
     beforeUpload(file) {
+      if (!this.queryParams.groupId) {
+        this.$message.warning('请先选择左侧分组再上传图片')
+        return false
+      }
       const isPic =
         file.type === 'image/jpeg' ||
         file.type === 'image/png' ||

src/components/Material/single.vue

@@ -62,11 +62,14 @@
                 </el-col>
                 <el-col :span="12" style="text-align: right;">
                   <el-upload
+                    v-if="allowUpload"
                     :action="uploadUrl"
+                    :headers="uploadHeaders"
                     :file-list="[]"
                     :on-progress="handleProgress"
                     :before-upload="beforeUpload"
                     :on-success="handleSuccess"
+                    :on-error="handleUploadError"
                     :data="{type: 1}"
                     multiple
                   >
@@ -85,7 +88,7 @@
                 show-icon
               />
               <el-row :gutter="5">
-                <el-checkbox-group v-model="urls" :max="num - myValue.length">
+                <el-checkbox-group v-model="urls" :max="num - (myValue ? 1 : 0)">
                   <el-col v-for="(item,index) in tableData" :key="index" :span="4">
                     <el-card :body-style="{ padding: '5px' }">
                       <el-image
@@ -133,6 +136,7 @@
 <script>
 import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial, exportMaterial } from "@/api/store/material";
 import { getAllMaterialGroup,listMaterialGroup, getMaterialGroup, delMaterialGroup, addMaterialGroup, updateMaterialGroup, exportMaterialGroup } from "@/api/store/materialGroup";
+import { getUploadHeaders } from '@/utils/uploadHeaders'
 import { Loading } from 'element-ui';
 export default {
   name: 'ImageSelect',
@@ -165,6 +169,16 @@ export default {
       default() {
         return 150
       }
+    },
+    /** 素材库弹窗内是否显示「批量上传」 */
+    allowUpload: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    uploadHeaders() {
+      return getUploadHeaders()
     }
   },
   watch: {
@@ -260,8 +274,10 @@ export default {
     getAllMaterialGroup() {
       this.materialGroupLoading = true;
       getAllMaterialGroup({}).then(response => {
-        this.materialGroupList = response.data
-        console.log(this.materialGroupList)
+        this.materialGroupList = response.data || []
+        if (this.materialGroupList.length && !this.queryParams.groupId) {
+          this.selectGroup(this.materialGroupList[0])
+        }
         this.materialGroupLoading = false;
       });
     },
@@ -305,13 +321,22 @@ export default {
     },
     handleProgress(event, file, fileList) {
     },
+    handleUploadError() {
+      this.$message.error('图片上传失败')
+      this.resultNumber = 0
+    },
     handleSuccess(response, file, fileList) {
       const that = this
+      const url = response.url || (response.data && response.data.url)
+      if (!url) {
+        this.$message.error(response.msg || '上传失败，未返回图片地址')
+        return
+      }
       addMaterial({
         type: '1',
         groupId: this.queryParams.groupId,
         name: file.name,
-        url: response.url
+        url: url
       }).then(() => {
         this.resultNumber++
         if (fileList.length === this.resultNumber) {
@@ -321,6 +346,10 @@ export default {
       })
     },
     beforeUpload(file) {
+      if (!this.queryParams.groupId) {
+        this.$message.warning('请先选择左侧分组再上传图片')
+        return false
+      }
       const isPic =
         file.type === 'image/jpeg' ||
         file.type === 'image/png' ||

src/utils/uploadHeaders.js

@@ -0,0 +1,15 @@
+import { getToken, getTenantCode } from '@/utils/auth'
+
+/** el-upload 与 axios 保持一致的上传请求头 */
+export function getUploadHeaders() {
+  const headers = { 'X-Frontend-Type': 'admin' }
+  const tenantCode = getTenantCode()
+  if (tenantCode) {
+    headers['tenant-code'] = tenantCode
+  }
+  const token = getToken()
+  if (token) {
+    headers['Authorization'] = 'Bearer ' + token
+  }
+  return headers
+}

src/views/chat/chatKeyword/index.vue

@@ -109,18 +109,9 @@
         <el-form-item label="回复内容" prop="content" v-if="form.type==1">
           <el-input   type="textarea" :rows="2" v-model="form.content" placeholder="请输入回复内容" />
         </el-form-item>
-        <!-- <el-form-item label="企微名片" prop="qwCode" v-if="form.type==2">
-          <el-upload
-            v-model="form.qwCode"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.qwCode" :src="form.qwCode" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item> -->
+        <el-form-item label="企微名片" prop="qwCode" v-if="form.type==2">
+          <ImageUpload v-model="form.qwCode" :limit="1" />
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -137,8 +128,6 @@ export default {
   name: "ChatKeyword",
   data() {
     return {
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      baseUrl: process.env.VUE_APP_BASE_API,
       typeOptions:[],
       // 遮罩层
       loading: true,
@@ -197,22 +186,6 @@ export default {
     this.getList();
   },
   methods: {
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.qwCode=res.url;
-          this.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
     /** 查询关键字列表 */
     getList() {
       this.loading = true;

src/views/chat/chatRole/index.vue

@@ -123,19 +123,8 @@
                   />
             </el-select>
         </el-form-item>
-        <el-form-item label="头像" prop="kfHeadUrl"  >
-          <el-upload
-            accept=".jpg"
-            name="media"
-            v-model="form.avatar"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.avatar" :src="form.avatar" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+        <el-form-item label="头像" prop="kfHeadUrl">
+          <ImageUpload v-model="form.avatar" :limit="1" :width="200" :height="200" />
         </el-form-item>
         <el-form-item label="AI模型" prop="mode">
           <el-select v-model="form.mode" placeholder="请选择AI模型" clearable size="small">
@@ -164,7 +153,6 @@
 
 <script>
 import { listChatRole, getChatRole, delChatRole, addChatRole, updateChatRole, exportChatRole } from "@/api/chat/chatRole";
-import { getUrl } from "@/api/chat/chatUpload";
 import QRCode from 'qrcodejs2'
 
 export default {
@@ -172,7 +160,6 @@ export default {
   data() {
     return {
       qrOpen:false,
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
       modeOptions:[],
       typeOptions:[],
       // 遮罩层
@@ -258,40 +245,6 @@ export default {
       }, 200);
 
 
-    },
-    getUrl(mediaId) {
-      var param={
-        mediaId:mediaId
-      }
-      getUrl(param).then(response => {
-        //this.form.url = response.data.url;
-      });
-    },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          if(res.data.errcode!=0){
-            this.msgError(res.data.errmsg);
-
-          }
-          else{
-            //获取图片
-            this.form.kfMediaId=res.data.media_id;
-            this.form.kfHeadUrl=res.data.url;
-            this.form.avatar = res.ossUrl;
-            this.$forceUpdate()
-          }
-
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
     },
     // 取消按钮
     cancel() {

src/views/chat/chatUser/index.vue

@@ -142,7 +142,7 @@
           <el-input v-model="form.externalUserid" placeholder="请输入微信客户 external_userid" />
         </el-form-item>
         <el-form-item label="头像" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入头像" />
+          <ImageUpload v-model="form.avatar" :limit="1" />
         </el-form-item>
         <el-form-item label="昵称" prop="nickname">
           <el-input v-model="form.nickname" placeholder="请输入昵称" />

src/views/company/companyUser/card/index.vue

@@ -174,16 +174,7 @@
         </el-form-item>
 
        <el-form-item label="名片图片" prop="imageUrl">
-            <el-upload
-              v-model="form.icon"
-              class="avatar-uploader"
-              :action="uploadUrl"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+            <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
 
        
@@ -436,21 +427,8 @@ export default {
      handleAddCustomer(){
          this.customer.open=true; 
      },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imageUrl=res.url;
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return  isLt1M;
-    },
+
+
 
   }
 };

src/views/company/companyUser/index.vue

@@ -142,19 +142,13 @@
                   <i class="el-icon-picture-outline"></i>
                 </div>
               </el-image>
-              <!-- 上传组件 -->
-              <el-upload
-                class="avatar-uploader"
-                action="#"
-                :show-file-list="false"
-                :http-request="(options) => handleCustomUpload(options, scope.row)"
-                :before-upload="(file) => beforeImageUpload(file, scope.row)"
-              >
-                <el-button size="small" type="primary" :loading="scope.row.uploading">
-                  {{ scope.row.qrCodeWeixin ? '更换图片' : '上传图片' }}
-                  <i class="el-icon-upload el-icon--right"></i>
-                </el-button>
-              </el-upload>
+              <ImageUpload
+                :value="scope.row.qrCodeWeixin"
+                :limit="1"
+                :width="80"
+                :height="80"
+                @input="(url) => handleQrCodeSelect(url, scope.row)"
+              />
               <div v-if="scope.row.uploadError" class="el-upload__tip" style="color: red;">
                 {{ scope.row.uploadError }}
               </div>
@@ -721,6 +715,7 @@ import {
   changeUserStatus,
   generateSubDomain,
   setIsRegisterMember,
+  updateCompanyUser,
   updateCompanyUserAreaList,
   isAllowedAllRegister, unBindDoctorId, bindDoctorId,updateBatchUserRoles,
   queryFsUserByPhone,
@@ -736,7 +731,7 @@ import { syncDept } from '@/api/qw/qwDept';
 import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
 import  selectUser  from "@/views/company/components/selectQwUser.vue";
 import { getConfigByKey } from "@/api/company/companyConfig";
-import {uploadUserQrCode, addCodeUrl} from "../../../api/company/companyUser";
+import { addCodeUrl } from "../../../api/company/companyUser";
 import selectDoctor from "@/views/qw/user/selectDoctor.vue";
 import AiSipCallUser from "../../aiSipCall/aiSipCallUser.vue";
 export default {
@@ -1584,71 +1579,18 @@ export default {
      * @param {File} file - 用户选择的文件对象
      * @param {Object} row - 当前行的数据对象
      */
-    beforeImageUpload(file, row) {
-      // 清除之前的错误信息
-      this.$set(row, 'uploadError', '');
-      const isJPG = file.type === 'image/jpeg';
-      const isPNG = file.type === 'image/png';
-      const isGIF = file.type === 'image/gif'; // 根据需要添加更多格式
-      const isValidFormat = isJPG || isPNG || isGIF;
-      const isLt2M = file.size / 1024 / 1024 < 2; // 限制图片大小为 2MB
-      if (!isValidFormat) {
-        const errorMsg = '上传二维码图片只能是 JPG/PNG/GIF 格式!';
-        this.$message.error(errorMsg);
-        this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
-        return false;
-      }
-      if (!isLt2M) {
-        const errorMsg = '上传二维码图片大小不能超过 2MB!';
-        this.$message.error(errorMsg);
-        this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
-        return false;
-      }
-      return true; // 校验通过，允许上传
-    },
-    /**
-     * 自定义上传方法
-     * @param {Object} options - Element UI upload 组件传递的参数，包含 file, onSuccess, onError, onProgress 等
-     * @param {Object} row - 当前行的数据对象
-     */
-    async handleCustomUpload(options, row) {
-
-      const file = options.file;
-      const formData = new FormData();
-      formData.append('file', file);
-
-      formData.append('userId', row.userId)
-
-      this.$set(row, 'uploading', true);
-      this.$set(row, 'uploadError', '');
-      try {
-        const response = await uploadUserQrCode(formData, progressEvent => {
-          const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-          console.log(`上传进度: ${percentCompleted}%`);
-        });
-        if (response && (response.url || (response.data && response.data.url))) {
-          const imageUrl = response.url || response.data.url;
-          this.$set(row, 'qrCodeWeixin', imageUrl);
-          this.$message.success('图片上传成功!');
-          options.onSuccess(response, file);
-        } else {
-          const errorMsg = response.message || '图片上传失败，服务器未返回有效URL';
-          this.$message.error(errorMsg);
-          this.$set(row, 'uploadError', errorMsg);
-          options.onError(new Error(errorMsg), file);
-        }
-      } catch (error) {
-        console.error('上传失败:', error);
-        let errorMsg = '图片上传失败';
-        if (error.message) {
-          errorMsg = error.message;
-        }
-        this.$message.error(errorMsg);
-        this.$set(row, 'uploadError', errorMsg);
-        options.onError(error, file);
-      } finally {
-        this.$set(row, 'uploading', false); // 无论成功失败，结束上传状态
+    handleQrCodeSelect(url, row) {
+      if (!url) {
+        this.$set(row, 'qrCodeWeixin', '')
+        return
       }
+      this.$set(row, 'uploadError', '')
+      updateCompanyUser({ userId: row.userId, qrCodeWeixin: url }).then(() => {
+        this.$set(row, 'qrCodeWeixin', url)
+        this.$message.success('二维码设置成功')
+      }).catch(() => {
+        this.$set(row, 'uploadError', '二维码保存失败')
+      })
     },
     requestUpload() {
     },

src/views/components/course/userCourseCatalogDetails.vue

@@ -154,11 +154,7 @@
 
 
         <el-form-item label="视频缩略图" prop="thumbnail">
-          <el-upload v-model="form.thumbnail" class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
-                     :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
-            <img v-if="form.thumbnail" :src="form.thumbnail" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.thumbnail" :limit="1" :width="300" :height="168" />
         </el-form-item>
         <video-upload :type="1" :isPrivate="isPrivate" :use-public-video-library="usePublicVideoLibrary" :fileKey.sync="form.fileKey" :fileSize.sync="form.fileSize"
                       :videoUrl.sync="videoUrl" :fileName.sync="form.fileName" :line_1.sync="form.lineOne"
@@ -409,18 +405,7 @@
           />
         </el-form-item>
         <el-form-item label="课程介绍图" prop="courseIntroImg">
-          <el-upload
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleCourseIntroSuccess"
-            :before-upload="beforeCourseIntroUpload">
-            <img v-if="form.courseIntroImg" :src="form.courseIntroImg" class="avatar" style="max-width: 300px; max-height: 200px;">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-          <div style="margin-top:5px;">
-            <el-button v-if="form.courseIntroImg" size="mini" type="danger" @click="form.courseIntroImg = null">删除图片</el-button>
-          </div>
+          <ImageUpload v-model="form.courseIntroImg" :limit="1" :width="300" :height="200" />
         </el-form-item>
 <!--        <el-form-item label="精选留言">-->
 <!--          <el-button size="small" type="primary" @click="openCommentImportDialog">导入留言</el-button>-->
@@ -643,15 +628,7 @@
                :rules="batchEditCoverDialog.rules"
                v-loading="batchEditCoverDialog.uploadLoading">
         <el-form-item label="视频封面" prop="thumbnail">
-          <el-upload v-model="batchEditCoverDialog.form.thumbnail"
-                     class="avatar-uploader"
-                     :action="uploadUrl"
-                     :show-file-list="false"
-                     :on-success="handleCoverSuccess"
-                     :before-upload="beforeAvatarUpload">
-            <img v-if="batchEditCoverDialog.form.thumbnail" :src="batchEditCoverDialog.form.thumbnail" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="batchEditCoverDialog.form.thumbnail" :limit="1" :width="300" :height="168" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -1099,21 +1076,6 @@ export default {
       return `${formattedHours}${formattedMinutes}:${formattedSeconds}`;
     },
 
-    handleAvatarSuccess(res, file) {
-      if (res.code == 200) {
-        this.form.thumbnail = res.url;
-        this.$forceUpdate()
-      } else {
-        this.msgError(res.msg);
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 5;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 5MB!');
-      }
-      return isLt1M;
-    },
     getDetails(courseId, courseName, isPrivate) {
       this.isPrivate = isPrivate
       this.courseName = courseName
@@ -1652,14 +1614,6 @@ export default {
       }
       this.batchEditCoverDialog.visible = true
     },
-    handleCoverSuccess(res, file) {
-      if (res.code === 200) {
-        this.batchEditCoverDialog.form.thumbnail = res.url;
-        this.$forceUpdate()
-      } else {
-        this.msgError(res.msg);
-      }
-    },
     submitEditCoverForm() {
       this.$refs["batchEditCoverDialogForm"].validate(valid => {
         if (!valid) {
@@ -1753,27 +1707,6 @@ export default {
         }
       }
     },
-    // 课程介绍图片上传成功
-    handleCourseIntroSuccess(res) {
-      if (res.code == 200) {
-        this.form.courseIntroImg = res.url;
-        this.$forceUpdate();
-      } else {
-        this.$message.error(res.msg || '上传失败');
-      }
-    },
-    // 课程介绍图片上传前校验（10MB限制）
-    beforeCourseIntroUpload(file) {
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (!isLt10M) {
-        this.$message.error('课程介绍图片大小不能超过10MB!');
-      }
-      const isImage = file.type.startsWith('image/');
-      if (!isImage) {
-        this.$message.error('只能上传图片格式文件!');
-      }
-      return isLt10M && isImage;
-    },
     // 打开精选留言导入弹窗
     openUserCommentDialog() {
       if (!this.form.courseId || !this.form.videoId) {

src/views/course/coursePlaySourceConfig/index.vue

@@ -158,7 +158,7 @@
           <el-input v-model="form.name" placeholder="请输入名称" />
         </el-form-item>
         <el-form-item label="图标" prop="img">
-          <image-upload v-model="form.img" :file-type='["png", "jpg", "jpeg"]' :limit="1"/>
+          <ImageUpload v-model="form.img" :limit="1" />
         </el-form-item>
         <el-form-item label="类型" prop="type">
           <el-select

src/views/course/userVideo/index.vue

@@ -268,16 +268,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="视频缩略图" prop="thumbnail">
-          <el-upload
-            v-model="form.thumbnail"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.thumbnail" :src="form.thumbnail" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.thumbnail" :limit="1" />
         </el-form-item>
         <video-upload
           :type="2"
@@ -763,51 +754,8 @@ export default {
       this.single = selection.length!==1
       this.multiple = !selection.length
     },
-    handleAvatarSuccess(res, file) {
-      if(res.code===200){
-            this.form.thumbnail=res.url;
-            this.$forceUpdate()
-          }
-          else{
-            this.msgError(res.msg);
-          }
-    },
-    beforeAvatarUpload(file) {
-      return new Promise((resolve, reject) => {
-        if (file.size / 1024 / 1024 > 3) {
-          this.$message.error('上传的图片不能超过3MB');
-          reject();
-          return;
-        }
-        if (file.size / 1024 / 1024 > 1) {
-          const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
-          // 文件大于1MB时进行压缩
-          this.compressImage(file).then((compressedFile) => {
-            loadingInstance.close();
-            if (compressedFile.size / 1024 > 500) {
-              this.$message.error('图片压缩后仍大于500KB');
-              reject();
-            } else {
-              // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-              console.log(`最终内存大小为: ${(compressedFile.size/1024).toFixed(2)}KB`);
-              resolve(compressedFile);
-            }
-          }).catch((err) => {
-            loadingInstance.close();
-            console.error(err);
-            reject();
-          });
-        } else {
-          resolve(file);
-        }
-      });
-      // const isLt1M = file.size / 1024 / 1024 < 1;
-      // if (!isLt1M) {
-      //   this.$message.error('上传图片大小不能超过 1MB!');
-      // }
-      // return   isLt1M;
-    },
+
+
     compressImage(file) {
       return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -1033,23 +981,4 @@ export default {
 .el-tag + .el-tag {
   margin-left: 10px;
 }
-   .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
 </style>

src/views/crm/components/addVisit.vue

@@ -34,21 +34,9 @@
                 <el-form-item label="跟进内容" prop="content">
                 <el-input type="textarea" :rows="2" v-model="form.content" placeholder="请输入跟进内容" />
                 </el-form-item>
-                <!-- <el-form-item label="跟进照片" prop="photos">
-                        <el-upload
-                        :file-list="photoList"
-                        :action="uploadUrl"
-                        class="avatar-uploader"
-                        list-type="picture-card"
-                        :on-success="handlePhotoSuccess"
-                        :on-preview="handlePhotoPreview"
-                        :on-remove="handlePhotoRemove">
-                        <i class="el-icon-plus"></i>
-                        </el-upload>
-                        <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisible" >
-                        <img width="100%" :src="dialogImageUrl" alt="" style="z-index:9999;">
-                        </el-dialog>
-                </el-form-item> -->
+                <el-form-item label="跟进照片" prop="photos">
+                    <ImageUpload v-model="form.photos" :limit="5" />
+                </el-form-item>
                 <el-form-item label="下次联系时间" prop="nextTime">
                 <el-date-picker clearable size="small" style="width: 200px"
                     v-model="form.nextTime"
@@ -72,17 +60,12 @@
             return {
                 customerTypeOptions:[],
                 statusOptions:[],
-                dialogImageUrl: '',
-                dialogVisible: false,
-                photoList:[],
-                images:[],
-                uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-                baseUrl: process.env.VUE_APP_BASE_API,
                 typeOptions:[],
                 form: {
                     customerId:null,
                     content:null,
-                    visitType:"1"
+                    visitType:"1",
+                    photos: null
                 },
                 // 表单校验
                 rules: {
@@ -113,41 +96,11 @@
             
         },
         methods: {
-            handlePhotoSuccess(res, file) {
-                if(res.code==200){
-                    this.images.push(res.url);
-                    this.form.photos=this.images.toString();
-                }
-                else{
-                this.msgError(res.msg);
-                }
-                
-            },
-            handlePhotoRemove(file, fileList) {
-                let url="";
-                if(file.response!=undefined){
-                    url=file.response.url;
-                }
-                else{
-                    url=file.url;
-                }
-                for(var i=0;i<this.images.length;i++){
-                    if(url==this.images[i]){
-                        this.images.splice(i,1);
-                    }
-                }
-                this.form.photos=this.images.toString();
-            },
-            handlePhotoPreview(file) {
-                this.dialogImageUrl = file.url;
-                this.dialogVisible = true;
-            },
             reset(customerId) {
-                this.photoList= [];
-                this.images= [];
                 this.form.customerId=customerId;
                 this.form.content=null;
                 this.form.visitType="1";
+                this.form.photos=null;
             },
             /** 提交按钮 */
             submitForm() {
@@ -179,21 +132,4 @@
 }
 </style>
 
-
-<style scoped>
-  .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-</style>
-
-
-
-
  

src/views/fastGpt/fastGptUser/index.vue

@@ -135,7 +135,7 @@
           <el-input v-model="form.externalUserid" placeholder="请输入微信客户 external_userid" />
         </el-form-item>
         <el-form-item label="头像" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入头像" />
+          <ImageUpload v-model="form.avatar" :limit="1" />
         </el-form-item>
         <el-form-item label="unionid" prop="unionid">
           <el-input v-model="form.unionid" placeholder="请输入unionid" />

src/views/his/adv/index.vue

@@ -165,16 +165,7 @@
           <el-input v-model="form.advTitle" placeholder="请输入广告标题" />
         </el-form-item>
         <el-form-item label="图片" prop="imageUrl" >
-          <el-upload
-                      v-model="form.imageUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" width="300px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="类型" prop="advType">
           <el-select v-model="form.advType"  placeholder="请选择类型" >
@@ -330,22 +321,7 @@ export default {
     updateText(text){
         this.form.content=text
       },
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.imageUrl=res.url;
-              self.$forceUpdate()
-            }
-            else{
-              this.msgError(res.msg);
-            }
-        },
-    beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-    },
+
     /** 查询广告列表 */
     getList() {
       this.loading = true;
@@ -478,24 +454,4 @@ export default {
 };
 </script>
 <style>
-   .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/article/index.vue

@@ -180,16 +180,7 @@
         </el-form-item>
 
         <el-form-item label="封面图片" prop="imageUrl">
-      <el-upload
-                  v-model="form.imageUrl"
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="handleAvatarSuccess"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" width="300px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-      </el-upload>
+      <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
@@ -351,22 +342,8 @@ export default {
        this.form.contents=text
     },
 
-    handleAvatarSuccess(res, file) {
-      if(res.code==200){
-        this.form.imageUrl=res.url;
-        self.$forceUpdate()
-      }
-      else{
-        this.msgError(res.msg);
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
     //获取分类
     getArticleCateList(){
       getAllArticleCateList().then(response => {
@@ -505,24 +482,4 @@ export default {
 };
 </script>
 <style>
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
-
 </style>

src/views/his/articleCate/index.vue

@@ -129,16 +129,7 @@
           <el-input v-model="form.cateName" placeholder="请输入分类名称" />
         </el-form-item>
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择状态">
@@ -232,22 +223,8 @@ export default {
         this.loading = false;
       });
     },
-    handleAvatarSuccess(res, file) {
-       if(res.code==200){
-         this.form.imgUrl=res.url;
-         self.$forceUpdate()
-       }
-       else{
-         this.msgError(res.msg);
-       }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -350,23 +327,4 @@ export default {
 </script>
 
 <style>
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
 </style>

src/views/his/caseArticle/index.vue

@@ -168,16 +168,7 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
 
         <el-form-item label="封面图片" prop="imgUrl">
-          <el-upload
-                      v-model="form.imgUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="医案科普分类" prop="articleType">
           <el-select v-model="form.articleType" placeholder="请选择医案科普分类">
@@ -351,13 +342,7 @@ export default {
           this.upload.isUploading = true;
         },
         // 文件上传成功处理
-        handleFileSuccess(response, file, fileList) {
-          this.upload.open = false;
-          this.upload.isUploading = false;
-          this.$refs.upload.clearFiles();
-          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-        },
+
         // 提交上传文件
         submitFileForm() {
           this.$refs.upload.submit();
@@ -368,25 +353,11 @@ export default {
                  this.$refs.Details.getDetails(row.id);
             }, 1);
         },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
+
     updateText(text){
           this.form.contents=text
         },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询医案科普列表 */
     getList() {
       this.loading = true;
@@ -514,24 +485,4 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/chineseMedicine/index.vue

@@ -163,16 +163,7 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-                      v-model="form.imgUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="中药名称" prop="medicineName">
           <el-input v-model="form.medicineName" placeholder="请输入中药名称" />
@@ -405,13 +396,7 @@ export default {
           this.upload.isUploading = true;
         },
         // 文件上传成功处理
-        handleFileSuccess(response, file, fileList) {
-          this.upload.open = false;
-          this.upload.isUploading = false;
-          this.$refs.upload.clearFiles();
-          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-        },
+
         // 提交上传文件
         submitFileForm() {
           this.$refs.upload.submit();
@@ -422,25 +407,11 @@ export default {
                  this.$refs.Details.getDetails(row.id);
             }, 1);
         },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
+
     updateText(text){
           this.form.contents=text
         },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询中药科普管理列表 */
     getList() {
       this.loading = true;
@@ -556,24 +527,4 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/department/index.vue

@@ -153,16 +153,7 @@
           <el-input v-model="form.deptCode" placeholder="请输入科室编码" />
         </el-form-item>
         <el-form-item label="图标" prop="iconUrl">
-          <el-upload
-            v-model="form.iconUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.iconUrl" :src="form.iconUrl" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.iconUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
             <el-input-number v-model="form.sort"  :min="0" label="描述文字"></el-input-number>
@@ -271,22 +262,8 @@ export default {
       });
   },
   methods: {
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.iconUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
 
 
 
@@ -419,24 +396,4 @@ export default {
 };
 </script>
 <style>
-
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px;
-     text-align: center;
-   }
 </style>

src/views/his/doctor/type1.vue

@@ -457,60 +457,24 @@
             <el-row>
                   <el-col :span="12">
                       <el-form-item label="身份证正面" prop="idCardFrontUrl">
-                         <el-upload id="sf"
-                            v-model="form.idCardFrontUrl"
-                            class="avatar-uploader"
-                            :action="fruploadUrl"
-                            :show-file-list="false"
-                            :on-success="frhandleAvatarSuccess"
-                            :before-upload="beforeAvatarUpload">
-                            <img v-if="form.idCardFrontUrl" :src="form.idCardFrontUrl" class="avatar" width="150px">
-                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
+                         <ImageUpload v-model="form.idCardFrontUrl" :limit="1" />
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                         <el-form-item label="工作照" prop="avatar">
-                           <el-upload
-                              v-model="form.avatar"
-                              class="avatar-uploader"
-                              :action="avataruploadUrl"
-                              :show-file-list="false"
-                              :on-success="avatarhandleAvatarSuccess"
-                              :before-upload="beforeAvatarUpload">
-                              <img v-if="form.avatar" :src="form.avatar" class="avatar" width="150px" >
-                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                          </el-upload>
+                           <ImageUpload v-model="form.avatar" :limit="1" />
                         </el-form-item>
                   </el-col>
             </el-row>
             <el-row>
                   <el-col :span="12">
                       <el-form-item label="身份证反面" prop="idCardBackUrl">
-                        <el-upload id="sf"
-                         v-model="form.idCardBackUrl"
-                         class="avatar-uploader"
-                         :action="bauploadUrl"
-                         :show-file-list="false"
-                         :on-success="bahandleAvatarSuccess"
-                         :before-upload="beforeAvatarUpload">
-                         <img v-if="form.idCardBackUrl" :src="form.idCardBackUrl" class="avatar" width="150px">
-                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
+                        <ImageUpload v-model="form.idCardBackUrl" :limit="1" />
                       </el-form-item>
                   </el-col>
                   <el-col :span="12">
                       <el-form-item label="医生签名" prop="signUrl">
-                        <el-upload id="sign"
-                         v-model="form.signUrl"
-                         class="avatar-uploader"
-                         :action="bauploadUrl"
-                         :show-file-list="false"
-                         :on-success="signhandleAvatarSuccess"
-                         :before-upload="beforeAvatarUpload">
-                         <img v-if="form.signUrl" :src="form.signUrl" class="avatar" width="150px">
-                         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
+                        <ImageUpload v-model="form.signUrl" :limit="1" />
                       </el-form-item>
                   </el-col>
             </el-row>
@@ -1071,61 +1035,8 @@ export default {
           this.citys=res.data;
         })
     },
-    avatarhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-            this.form.avatar=res.url;
-            this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-     },
-    frhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.idCardFrontUrl=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    bahandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.idCardBackUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
-     signhandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.signUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
 
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImages=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handleCertificateBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImagesBack=res.url;
-                 this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
+
     handlePractiseSuccess(res, file) {
             if(res.code==200){
               this.form.practiseImages=res.url;
@@ -1145,13 +1056,7 @@ export default {
               this.msgError(res.msg);
             }
     },
-    beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-    },
+
     /** 查询科室列表 */
      getdeplist() {
        listDepartment().then(response => {
@@ -1483,25 +1388,7 @@ export default {
   .pStar{
     padding-top: 10px;
   }
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px;
-     text-align: center;
-   }
-    #sf .avatar{
+#sf .avatar{
       min-width: 240px;
       min-height: 150px;
       display: block;

src/views/his/doctor/type2.vue

@@ -368,60 +368,24 @@
           <el-row>
                 <el-col :span="12">
                     <el-form-item label="身份证正面" prop="idCardFrontUrl">
-                       <el-upload
-                                  v-model="form.idCardFrontUrl"
-                                  class="avatar-uploader"
-                                  :action="FruploadUrl"
-                                  :show-file-list="false"
-                                  :on-success="FrhandleAvatarSuccess"
-                                  :before-upload="beforeAvatarUpload">
-                                  <img v-if="form.idCardFrontUrl" :src="form.idCardFrontUrl" class="avatar" width="300px">
-                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                      </el-upload>
+                       <ImageUpload v-model="form.idCardFrontUrl" :limit="1" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                       <el-form-item label="工作照" prop="avatar">
-                         <el-upload
-                                    v-model="form.avatar"
-                                    class="avatar-uploader"
-                                    :action="avataruploadUrl"
-                                    :show-file-list="false"
-                                    :on-success="avatarhandleAvatarSuccess"
-                                    :before-upload="beforeAvatarUpload">
-                                    <img v-if="form.avatar" :src="form.avatar" class="avatar" width="200px" >
-                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
+                         <ImageUpload v-model="form.avatar" :limit="1" />
                       </el-form-item>
                 </el-col>
           </el-row>
           <el-row>
                 <el-col :span="12">
                     <el-form-item label="身份证反面" prop="idCardBackUrl">
-                       <el-upload
-                                  v-model="form.idCardBackUrl"
-                                  class="avatar-uploader"
-                                  :action="BauploadUrl"
-                                  :show-file-list="false"
-                                  :on-success="BahandleAvatarSuccess"
-                                  :before-upload="beforeAvatarUpload">
-                                  <img v-if="form.idCardBackUrl" :src="form.idCardBackUrl" class="avatar" width="300px">
-                                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                      </el-upload>
+                       <ImageUpload v-model="form.idCardBackUrl" :limit="1" />
                     </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="医生签名" prop="signUrl">
-                    <el-upload id="sign"
-                               v-model="form.signUrl"
-                               class="avatar-uploader"
-                               :action="bauploadUrl"
-                               :show-file-list="false"
-                               :on-success="signhandleAvatarSuccess"
-                               :before-upload="beforeAvatarUpload">
-                      <img v-if="form.signUrl" :src="form.signUrl" class="avatar" width="150px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                    </el-upload>
+                    <ImageUpload v-model="form.signUrl" :limit="1" />
                   </el-form-item>
                 </el-col>
           </el-row>
@@ -766,108 +730,7 @@ export default {
           this.citys=res.data;
         })
     },
- avatarhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.avatar=res.url;
-            this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-     },
-    FrhandleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.idCardFrontUrl=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    BahandleAvatarSuccess(res, file) {
-                if(res.code==200){
-                  this.form.idCardBackUrl=res.url;
-                  this.$forceUpdate();
-                }
-                else{
-                  this.msgError(res.msg);
-                }
-     },
-    signhandleAvatarSuccess(res, file) {
-      if(res.code==200){
-        this.form.signUrl=res.url;
-        this.$forceUpdate();
-      }
-      else{
-        this.msgError(res.msg);
-      }
-    },
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImages=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handleCertificateBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.certificateImagesBack=res.url;
-                 this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImages=res.url;
-              console.log(this.form)
-               this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    handlePractiseBackSuccess(res, file) {
-            if(res.code==200){
-              this.form.practiseImagesBack=res.url;
-              this.$forceUpdate();
-            }
-            else{
-              this.msgError(res.msg);
-            }
-    },
-    beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-        },
-    /** 查询科室列表 */
-    getdeplist() {
-       listDepartment().then(response => {
-         this.depList = response.rows;
-       });
-     },
-     /** 查询医院列表 */
-    getHospitaldeplist() {
-        listAllHospital().then(response => {
-          this.hospitalList = response.rows;
-        });
-      },
-    /** 查询医生管理列表 */
-    getList() {
-      this.loading = true;
-       this.queryParams.doctorType=2;
-      listDoctor(this.queryParams).then(response => {
-        this.doctorList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
-    },
+
     // 取消按钮
    cancel() {
      this.open = false;
@@ -1128,26 +991,7 @@ export default {
   .pStar{
     padding-top: 10px;
   }
-  .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-  .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-    }
-  #sign .avatar{
+#sign .avatar{
     min-width: 120px;
     min-height: 80px;
     display: block;

src/views/his/doctorArticle/index.vue

@@ -185,16 +185,7 @@
         </el-form-item>
 
         <el-form-item label="封面图" prop="imageUrl">
-           <el-upload
-                      v-model="form.imageUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+           <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
@@ -368,21 +359,7 @@ export default {
     updateText(text){
       this.form.content=text
     },
-    handleAvatarSuccess(res, file) {
-      if(res.code==200){
-           this.form.imageUrl=res.url;
-           self.$forceUpdate()
-       }else{
-              this.msgError(res.msg);
-            }
-        },
-    beforeAvatarUpload(file) {
-       const isLt1M = file.size / 1024 / 1024 < 1;
-        if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-    },
+
     doctorMethod(rows){
       this.userName.name=rows;
       this.getlistdocuser();
@@ -526,25 +503,6 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
 </style>
 
 

src/views/his/doctorArticleCate/index.vue

@@ -129,16 +129,7 @@
           <el-input v-model="form.cateName" placeholder="请输入分类名称" />
         </el-form-item>
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="状态" prop="status">
           <el-select v-model="form.status" placeholder="请选择状态">
@@ -233,22 +224,8 @@ export default {
         this.loading = false;
       });
     },
-    handleAvatarSuccess(res, file) {
-       if(res.code==200){
-         this.form.imgUrl=res.url;
-         self.$forceUpdate()
-       }
-       else{
-         this.msgError(res.msg);
-       }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -351,23 +328,4 @@ export default {
 };
 </script>
 <style>
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
 </style>

src/views/his/famousPrescribe/index.vue

@@ -178,16 +178,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="90px">
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-                      v-model="form.imgUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="名称" prop="prescribeName">
           <el-input v-model="form.prescribeName" placeholder="请输入经典名方名称" />
@@ -401,25 +392,11 @@ export default {
                  this.$refs.Details.getDetails(row.id);
             }, 1);
         },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
+
     updateText(text){
           this.form.descs=text
         },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询经典名方列表 */
     getList() {
       this.loading = true;
@@ -485,13 +462,7 @@ export default {
           this.upload.isUploading = true;
         },
         // 文件上传成功处理
-        handleFileSuccess(response, file, fileList) {
-          this.upload.open = false;
-          this.upload.isUploading = false;
-          this.$refs.upload.clearFiles();
-          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-        },
+
         // 提交上传文件
         submitFileForm() {
           this.$refs.upload.submit();
@@ -569,24 +540,4 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/healthTongue/index.vue

@@ -151,7 +151,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="舌苔图片" prop="tongueUrl">
-          <el-input v-model="form.tongueUrl" placeholder="请输入舌苔图片" />
+          <ImageUpload v-model="form.tongueUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="舌苔id" prop="tongueId">
           <el-input v-model="form.tongueId" placeholder="请输入舌苔id" />

src/views/his/homeArticle/index.vue

@@ -149,15 +149,7 @@
           <el-input v-model="form.description" placeholder="请输入描述内容" maxlength="200"/>
         </el-form-item>
         <el-form-item label="封面图片" prop="imageUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleImageUrlSuccess"
-            :before-upload="beforeImageUrlUpload">
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="是否推荐" prop="isTui">
           <el-radio-group v-model="form.isTui">
@@ -318,22 +310,9 @@ export default {
       this.form.content = text;
     },
     // 图片上传成功处理
-    handleImageUrlSuccess(res, file) {
-      if (res.code == 200) {
-        this.form.imageUrl = res.url;
-        this.$forceUpdate();
-      } else {
-        this.msgError(res.msg);
-      }
-    },
+
     // 图片上传前的验证
-    beforeImageUrlUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过1MB!');
-      }
-      return isLt1M;
-    },
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -464,24 +443,6 @@ export default {
 </script>
 
 <style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
 .avatar {
   width: 150px;
   height: 150px;

src/views/his/homeCategory/index.vue

@@ -119,15 +119,7 @@
           <el-input v-model="form.categoryName" placeholder="请输入分类名称" />
         </el-form-item>
         <el-form-item label="封面图片" prop="imageUrl">
-          <el-upload
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleImageUrlSuccess"
-            :before-upload="beforeImageUrlUpload">
-            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="排序" prop="sort">
           <el-input-number v-model="form.sort" placeholder="请输入排序" :min="0" controls-position="right" />
@@ -318,45 +310,14 @@ export default {
     //     }).catch(function() {});
     // },
     // 图片上传成功处理
-    handleImageUrlSuccess(res, file) {
-      if (res.code == 200) {
-        this.form.imageUrl = res.url;
-        this.$forceUpdate();
-      } else {
-        this.msgError(res.msg);
-      }
-    },
+
     // 图片上传前的验证
-    beforeImageUrlUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过1MB!');
-      }
-      return isLt1M;
-    }
+
   }
 };
 </script>
 
 <style>
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
 .avatar {
   width: 150px;
   height: 150px;

src/views/his/homeView/index.vue

@@ -121,7 +121,7 @@
           <el-input v-model="form.nickname" placeholder="请输入用户昵称" />
         </el-form-item>
         <el-form-item label="用户头像" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入用户头像URL" />
+          <ImageUpload v-model="form.avatar" :limit="1" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">

src/views/his/hospital/index.vue

@@ -251,16 +251,7 @@
           <el-input v-model="form.descs" type="textarea" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="医院照片" >
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="省市区" >
           <el-cascader
@@ -291,16 +282,7 @@
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
         <el-form-item label="处方印章" prop="sealUrl">
-         <el-upload
-           v-model="form.sealUrl"
-           class="avatar-uploader"
-           :action="uploadUrl2"
-           :show-file-list="false"
-           :on-success="handleAvatarSuccess2"
-           :before-upload="beforeAvatarUpload">
-           <img v-if="form.sealUrl" :src="form.sealUrl" class="avatar" width="200px">
-           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-         </el-upload>
+         <ImageUpload v-model="form.sealUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入联系电话" />
@@ -490,13 +472,7 @@ export default {
           this.upload.isUploading = true;
         },
         // 文件上传成功处理
-        handleFileSuccess(response, file, fileList) {
-          this.upload.open = false;
-          this.upload.isUploading = false;
-          this.$refs.upload.clearFiles();
-          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-        },
+
         // 提交上传文件
         submitFileForm() {
           this.$refs.upload.submit();
@@ -536,35 +512,6 @@ export default {
         })
     },
 
-
-  handleAvatarSuccess2(res, file) {
-        if(res.code==200){
-          this.form.sealUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-
-    },
-
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
-
     /** 查询医院列表 */
     getList() {
       this.loading = true;
@@ -696,24 +643,4 @@ export default {
 };
 </script>
 <style>
-
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px;
-     text-align: center;
-   }
 </style>

src/views/his/medicatedFood/index.vue

@@ -156,16 +156,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-                      v-model="form.imgUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="药膳名称" prop="foodName">
           <el-input v-model="form.foodName" placeholder="请输入药膳名称" />
@@ -391,25 +382,11 @@ export default {
                  this.$refs.Details.getDetails(row.id);
             }, 1);
         },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
+
     updateText(text){
           this.form.descs=text
         },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询药膳食疗列表 */
     getList() {
       this.loading = true;
@@ -500,13 +477,7 @@ export default {
              this.upload.isUploading = true;
            },
            // 文件上传成功处理
-           handleFileSuccess(response, file, fileList) {
-             this.upload.open = false;
-             this.upload.isUploading = false;
-             this.$refs.upload.clearFiles();
-             this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-             this.getList();
-           },
+
            // 提交上传文件
            submitFileForm() {
              this.$refs.upload.submit();
@@ -564,24 +535,4 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/package/index.vue

@@ -253,16 +253,7 @@
           <el-input v-model="form.secondName" placeholder="请输入套餐包别名" />
         </el-form-item>
         <el-form-item label="封面图" prop="imgUrl">
-            <el-upload
-              v-model="form.imgUrl"
-              class="avatar-uploader"
-              :action="uploadUrl"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+            <ImageUpload v-model="form.imgUrl" :limit="1" />
          </el-form-item>
         <el-form-item label="轮播图" prop="images">
           <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
@@ -968,13 +959,7 @@ export default {
       });
       },
         // 文件上传成功处理
-    handleFileSuccess(response, file, fileList) {
-      this.upload.open = false;
-      this.upload.isUploading = false;
-      this.$refs.upload.clearFiles();
-      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-      this.getList();
-    },
+
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
@@ -1223,98 +1208,6 @@ export default {
           }
         }
       });
-    },
-     handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.imgUrl=res.url;
-              // self.$forceUpdate()
-            }
-            else{
-              this.msgError(res.msg);
-            }
-        },
-      beforeAvatarUpload(file) {
-        return new Promise((resolve, reject) => {
-          if (file.size / 1024 / 1024 > 3) {
-            this.$message.error('上传的图片不能超过3MB');
-            reject();
-            return;
-          }
-          if (file.size / 1024 > 500) {
-            const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
-            // 文件大于1MB时进行压缩
-            this.compressImage(file).then((compressedFile) => {
-              loadingInstance.close();
-              if (compressedFile.size / 1024 > 500) {
-                this.$message.error('图片压缩后仍大于500KB');
-                reject();
-              } else {
-                // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-                console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-                console.log(`最终内存大小为: ${(compressedFile.size/1024).toFixed(2)}KB`);
-                resolve(compressedFile);
-              }
-            }).catch((err) => {
-              loadingInstance.close();
-              console.error(err);
-              reject();
-            });
-          } else {
-            resolve(file);
-          }
-        });
-      },
-      compressImage(file) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (event) => {
-          const img = new Image();
-          img.src = event.target.result;
-          img.onload = () => {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            const width = img.width;
-            const height = img.height;
-            canvas.width = width;
-            canvas.height = height;
-            ctx.drawImage(img, 0, 0, width, height);
-
-            let quality = 1; // 初始压缩质量
-            let dataURL = canvas.toDataURL('image/jpeg', quality);
-
-            // 逐步压缩，直到图片大小小于500KB并且压缩质量不再降低
-            while (dataURL.length / 1024 > 500 && quality > 0.1) {
-              quality -= 0.01;
-              dataURL = canvas.toDataURL('image/jpeg', quality);
-            }
-            this.finalQuality = quality; // 存储最终的压缩质量
-
-            if (dataURL.length / 1024 > 500) {
-              reject(new Error('压缩后图片仍然大于500KB'));
-              return;
-            }
-
-            const arr = dataURL.split(',');
-            const mime = arr[0].match(/:(.*?);/)[1];
-            const bstr = atob(arr[1]);
-            let n = bstr.length;
-            const u8arr = new Uint8Array(n);
-            while (n--) {
-              u8arr[n] = bstr.charCodeAt(n);
-            }
-            const compressedFile = new Blob([u8arr], { type: mime });
-            compressedFile.name = file.name;
-            resolve(compressedFile);
-          };
-          img.onerror = (error) => {
-            reject(error);
-          };
-        };
-        reader.onerror = (error) => {
-          reject(error);
-        };
-      });
     },
     /** 删除按钮操作 */
     bulkCopy(row) {
@@ -1367,23 +1260,4 @@ export default {
 .icon-button {
   border-radius: 0;
 }
-.avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px !important;
-     text-align: center;
-   }
 </style>

src/views/his/packageCate/index.vue

@@ -132,16 +132,7 @@
     <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="分类标识" prop="cateCode">
           <el-input-number v-model="form.cateCode" label="请输入分类标识"></el-input-number>
@@ -275,22 +266,8 @@ export default {
       this.open = false;
       this.reset();
     },
-    handleAvatarSuccess(res, file) {
-       if(res.code==200){
-         this.form.imgUrl=res.url;
-         self.$forceUpdate()
-       }
-       else{
-         this.msgError(res.msg);
-       }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
     // 表单重置
     reset() {
       this.form = {
@@ -389,23 +366,4 @@ export default {
 };
 </script>
 <style>
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
 </style>

src/views/his/store/index.vue

@@ -208,32 +208,14 @@
         <el-row>
             <el-col :span="12">
               <el-form-item label="店铺LOGO" prop="logoUrl">
-               <el-upload
-                 v-model="form.logoUrl"
-                 class="avatar-uploader"
-                 :action="uploadUrl"
-                 :show-file-list="false"
-                 :on-success="handleAvatarSuccess"
-                 :before-upload="beforeAvatarUpload">
-                 <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" width="200px">
-                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-               </el-upload>
+               <ImageUpload v-model="form.logoUrl" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
         	</el-col>
         </el-row>
         <el-form-item label="资质证书" prop="licenseImages">
-          <el-upload
-            v-model="form.licenseImages"
-            class="avatar-uploader"
-            :action="licenseuploadUrl"
-            :show-file-list="false"
-            :on-success="licensehandleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.licenseImages" :src="form.licenseImages" class="avatar" width="200px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>          
-          </el-upload>
+          <ImageUpload v-model="form.licenseImages" :limit="1" />
         </el-form-item>
         <el-form-item label="店铺介绍" prop="descs" >
           <el-input v-model="form.descs" placeholder="请输入店铺介绍" type="textarea"/>
@@ -505,33 +487,6 @@ shippingType:[],
             })
         },
 
-    licensehandleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.licenseImages=res.url;
-          this.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-        handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.logoUrl=res.url;
-              this.$forceUpdate()
-            }
-            else{
-              this.msgError(res.msg);
-            }
-        },
-        beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-        },
-
-
     /** 查询店铺管理列表 */
     getList() {
       this.loading = true;
@@ -678,24 +633,4 @@ shippingType:[],
 };
 </script>
 <style>
-
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
 </style>

src/views/his/storeProductCategory/index.vue

@@ -134,16 +134,7 @@
            <el-input-number v-model="form.sort"  :min="0" :max="100" label="排序"></el-input-number>
         </el-form-item>
         <el-form-item label="图标" prop="pic">
-          <el-upload
-                      v-model="form.pic"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.pic" :src="form.pic" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.pic" :limit="1" />
         </el-form-item>
         <el-form-item label="是否推荐" prop="isShow">
       <el-radio-group v-model="form.isShow">
@@ -266,25 +257,8 @@ export default {
         console.log(response.data)
       });
     },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          // this.form.imgUrl=res.url;
-          
-          this.form.pic=res.url;
-         
-          this.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -393,24 +367,4 @@ export default {
 };
 </script>
 <style>
-   .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/his/testTemp/index.vue

@@ -159,16 +159,7 @@
                 </el-form-item>
 
                 <el-form-item label="图片" prop="img">
-                  <el-upload
-                              v-model="form.img"
-                              class="avatar-uploader"
-                              :action="uploadUrl"
-                              :show-file-list="false"
-                              :on-success="handleAvatarSuccess"
-                              :before-upload="beforeAvatarUpload">
-                              <img v-if="form.img" :src="form.img" class="avatar" width="300px">
-                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                  </el-upload>
+                  <ImageUpload v-model="form.img" :limit="1" />
                 </el-form-item>
                 <el-form-item label="预计分钟" prop="time">
                   <el-input-number v-model="form.time" label="测试人数"></el-input-number>
@@ -372,31 +363,7 @@ export default {
     });
   },
   methods: {
-    handleAvatarSuccess(res, file) {
-            if(res.code==200){
-              this.form.img=res.url;
-              self.$forceUpdate()
-            }
-            else{
-              this.msgError(res.msg);
-            }
-        },
-        beforeAvatarUpload(file) {
-          const isLt1M = file.size / 1024 / 1024 < 1;
-          if (!isLt1M) {
-            this.$message.error('上传图片大小不能超过 1MB!');
-          }
-          return   isLt1M;
-        },
-    updateText(text){
-         this.form.descs=text
-       },
-    updateitemOpen(row){
-      setTimeout(() => {
-           this.$refs.testTempItemDetails.getDetails(row.itemType,this.form.tempId);
-      }, 1);
-      this.testItemOpen=true;
-    },
+
     updateItem(row){
 
       this.reset();
@@ -588,23 +555,4 @@ export default {
   .el-table .el-table__header th {
     height: 10px; /* 设置你想要的高度 */
   }
-  .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
 </style>

src/views/his/vessel/index.vue

@@ -168,16 +168,7 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="110px">
 
         <el-form-item label="图片" prop="imgUrl">
-          <el-upload
-                      v-model="form.imgUrl"
-                      class="avatar-uploader"
-                      :action="uploadUrl"
-                      :show-file-list="false"
-                      :on-success="handleAvatarSuccess"
-                      :before-upload="beforeAvatarUpload">
-                      <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="200px">
-                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
        <el-form-item label="经络穴位名称" prop="vesselName">
                  <el-input v-model="form.vesselName" placeholder="请输入经络穴位名称" />
@@ -378,13 +369,7 @@ export default {
           this.upload.isUploading = true;
         },
         // 文件上传成功处理
-        handleFileSuccess(response, file, fileList) {
-          this.upload.open = false;
-          this.upload.isUploading = false;
-          this.$refs.upload.clearFiles();
-          this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
-          this.getList();
-        },
+
         // 提交上传文件
         submitFileForm() {
           this.$refs.upload.submit();
@@ -395,25 +380,11 @@ export default {
                  this.$refs.Details.getDetails(row.id);
             }, 1);
         },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imgUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
+
     updateText(text){
           this.form.descs=text
         },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询经络管理列表 */
     getList() {
       this.loading = true;
@@ -539,24 +510,4 @@ export default {
 };
 </script>
 <style>
-    .avatar-uploader .el-upload {
-       border: 1px dashed #d9d9d9;
-       border-radius: 6px;
-       cursor: pointer;
-       position: relative;
-       overflow: hidden;
-     }
-     .avatar-uploader .el-upload:hover {
-       border-color: #409EFF;
-     }
-
-     .avatar-uploader-icon {
-       font-size: 28px;
-       color: #8c939d;
-       width: 150px;
-       height: 150px;
-       line-height: 150px;
-       text-align: center;
-     }
-
 </style>

src/views/hisStore/adv/index.vue

@@ -137,16 +137,7 @@
           </el-radio-group>
         </el-form-item>
          <el-form-item label="广告图片" prop="imageUrl" v-if="form.urlType==1">
-            <el-upload
-              v-model="form.icon"
-              class="avatar-uploader"
-              :action="uploadUrl"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeAvatarUpload">
-              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
-              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            </el-upload>
+            <ImageUpload v-model="form.imageUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="广告视频" prop="video" v-if="form.urlType==2">
           <div>
@@ -312,22 +303,8 @@ export default {
     updateText(text){
       this.form.content=text
     },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imageUrl=res.url;
-        }
-        else{
-          this.msgError(res.msg);
-        }
 
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 200;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 200MB!');
-      }
-      return   isLt1M;
-    },
+
     /** 查询广告列表 */
     getList() {
       this.loading = true;
@@ -481,28 +458,9 @@ export default {
 };
 </script>
 <style >
- .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-  .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
 </style>
 <style scoped>
-
-  .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 300px;
-    height: 150px;
-    line-height: 150px;
-    text-align: center;
-  }
-  .avatar {
+.avatar {
     width: 300px;
     height: 150px;
     display: block;

src/views/hisStore/store/index.vue

@@ -230,16 +230,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="店铺LOGO" prop="logoUrl">
-              <el-upload
-                v-model="form.logoUrl"
-                class="avatar-uploader"
-                :action="uploadUrl"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccess"
-                :before-upload="beforeAvatarUpload">
-                <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" width="200px">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
+              <ImageUpload v-model="form.logoUrl" :limit="1" />
             </el-form-item>
           </el-col >
           <el-col :span="12">
@@ -290,15 +281,7 @@
         <el-row>
           <el-col :span="12">
             <el-form-item label="营业执照上传" prop="businessLicense">
-              <el-upload
-                class="avatar-uploader"
-                :action="uploadUrl"
-                :show-file-list="false"
-                :on-success="(response, file) => handleFileSuccess(response, file, 'businessLicense')"
-                :before-upload="beforeAvatarUpload">
-                <img v-if="form.businessLicense" :src="form.businessLicense" class="avatar" width="100px">
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
+              <ImageUpload v-model="form.businessLicense" :limit="1" />
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -318,15 +301,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="药品经营许可证上传" prop="drugLicense">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'drugLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.drugLicense" :src="form.drugLicense" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.drugLicense" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -345,15 +320,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="1类器械生产备案上传" prop="medicalDevice1">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice1')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice1" :src="form.medicalDevice1" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.medicalDevice1" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -372,15 +339,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="2类医疗器械备案证书上传" prop="medicalDevice2">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice2')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice2" :src="form.medicalDevice2" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.medicalDevice2" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -399,15 +358,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="3类器械经营许可证上传" prop="medicalDevice3">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'medicalDevice3')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalDevice3" :src="form.medicalDevice3" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.medicalDevice3" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -426,15 +377,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="食品经营许可证上传" prop="foodLicense">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'foodLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.foodLicense" :src="form.foodLicense" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.foodLicense" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -453,15 +396,7 @@
           <el-row>
             <el-col :span="12">
               <el-form-item label="医疗机构执业许可证上传" prop="medicalLicense">
-                <el-upload
-                  class="avatar-uploader"
-                  :action="uploadUrl"
-                  :show-file-list="false"
-                  :on-success="(response, file) => handleFileSuccess(response, file, 'medicalLicense')"
-                  :before-upload="beforeAvatarUpload">
-                  <img v-if="form.medicalLicense" :src="form.medicalLicense" class="avatar" width="100px">
-                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                </el-upload>
+                <ImageUpload v-model="form.medicalLicense" :limit="1" />
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -755,29 +690,9 @@ export default {
       })
     },
 
-    licensehandleAvatarSuccess(res, file) {
-      if (res.code === 200) {
-        this.form.licenseImages = res.url;
-        this.$forceUpdate()
-      } else {
-        this.msgError(res.msg);
-      }
-    },
-    handleAvatarSuccess(res, file) {
-      if (res.code === 200) {
-        this.form.logoUrl = res.url;
-        this.$forceUpdate()
-      } else {
-        this.msgError(res.msg);
-      }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return isLt1M;
-    },
+
+
+
     handleBizLicenseSuccess(res, file) {
       if (res.code === 200) {
         this.form.bizLicense = res.url;
@@ -795,14 +710,7 @@ export default {
     },
 
     // 通用文件上传成功处理函数
-    handleFileSuccess(response, file, field) {
-      if (response.code === 200) {
-        this.$set(this.form, field, response.url);
-        this.$forceUpdate();
-      } else {
-        this.msgError(response.msg);
-      }
-    },
+
 
     /** 查询店铺管理列表 */
     getList() {
@@ -1084,28 +992,6 @@ export default {
 };
 </script>
 <style>
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-}
-
 .el-divider__text {
   font-size: 16px;
   font-weight: bold;

src/views/hisStore/storeProductAttrValue/index.vue

@@ -239,7 +239,7 @@
           <el-input v-model="form.price" placeholder="请输入属性金额" />
         </el-form-item>
         <el-form-item label="图片" prop="image">
-          <el-input v-model="form.image" placeholder="请输入图片" />
+          <ImageUpload v-model="form.image" :limit="1" />
         </el-form-item>
         <el-form-item label="成本价" prop="cost">
           <el-input v-model="form.cost" placeholder="请输入成本价" />

src/views/hisStore/storeShop/index.vue

@@ -262,7 +262,7 @@
           <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" />
         </el-form-item>
         <el-form-item label="门店logo" prop="image">
-          <el-input v-model="form.image" placeholder="请输入门店logo" />
+          <ImageUpload v-model="form.image" :limit="1" />
         </el-form-item>
         <el-form-item label="纬度" prop="latitude">
           <el-input v-model="form.latitude" placeholder="请输入纬度" />

src/views/hisStore/storeShopStaff/index.vue

@@ -182,7 +182,7 @@
           <el-input v-model="form.nickname" placeholder="请输入微信用户id" />
         </el-form-item>
         <el-form-item label="店员头像" prop="avatar">
-          <el-input v-model="form.avatar" placeholder="请输入店员头像" />
+          <ImageUpload v-model="form.avatar" :limit="1" />
         </el-form-item>
         <el-form-item label="门店id" prop="storeId">
           <el-input v-model="form.storeId" placeholder="请输入门店id" />

src/views/live/gift/index.vue

@@ -118,8 +118,8 @@
         <el-form-item label="礼物描述" prop="description">
           <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="图标链接地址" prop="iconUrl">
-          <el-input v-model="form.iconUrl" placeholder="请输入礼物图标链接地址" />
+        <el-form-item label="礼物图标" prop="iconUrl">
+          <ImageUpload v-model="form.iconUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="礼物价格" prop="price">
           <el-input v-model="form.price" placeholder="请输入礼物价格" />

src/views/qw/contactWay/index.vue

@@ -450,16 +450,7 @@
           <el-input type="textarea" cols="1000" v-model="form.textContent"  placeholder="请输入消息文本内容" />
         </el-form-item>
         <el-form-item label="图片的链接" prop="imagePicUrl"  v-if="form.isWelcome==1">
-          <el-upload
-             v-model="form.imgUrl"
-             class="avatar-uploader"
-             :action="uploadUrl"
-             :show-file-list="false"
-             :on-success="handleAvatarSuccess"
-             :before-upload="beforeAvatarUpload">
-             <img v-if="form.imagePicUrl" :src="form.imagePicUrl" class="avatar" width="300px">
-             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imagePicUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="分时段欢迎语"  prop="isSpanWelcome">
           <el-switch
@@ -1348,22 +1339,8 @@ export default {
       this.title = "添加企微活码";
       this.form.groupId=this.queryParams.groupId
     },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.imagePicUrl=res.url;
 
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
 
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -1603,25 +1580,6 @@ export default {
 };
 </script>
 <style scoped>
-  .avatar-uploader .el-upload {
-     border: 1px dashed #d9d9d9;
-     border-radius: 6px;
-     cursor: pointer;
-     position: relative;
-     overflow: hidden;
-   }
-   .avatar-uploader .el-upload:hover {
-     border-color: #409EFF;
-   }
-
-   .avatar-uploader-icon {
-     font-size: 28px;
-     color: #8c939d;
-     width: 150px;
-     height: 150px;
-     line-height: 150px;
-     text-align: center;
-   }
 </style>
 <style scoped>
 /* CSS 样式 */

src/views/qw/drainageLink/type1.vue

@@ -176,16 +176,7 @@
           <el-input v-model="form.companyName" placeholder="请输入企业名称" />
         </el-form-item>
         <el-form-item label="企业头像" prop="avatarUrl">
-          <el-upload
-             v-model="form.avatarUrl"
-             class="avatar-uploader"
-             :action="uploadUrl"
-             :show-file-list="false"
-             :on-success="handleAvatarSuccess"
-             :before-upload="beforeAvatarUpload">
-             <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" width="300px">
-             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.avatarUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="文案">
           <el-input v-model="form.content" type="textarea" placeholder="文案" />
@@ -388,22 +379,8 @@ export default {
           this.msgSuccess("删除成功");
         }).catch(() => {});
     },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.avatarUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
+
+
 
     /** 导出按钮操作 */
     handleExport() {
@@ -424,24 +401,4 @@ export default {
 };
 </script>
 <style scoped>
-
-.avatar-uploader .el-upload {
-   border: 1px dashed #d9d9d9;
-   border-radius: 6px;
-   cursor: pointer;
-   position: relative;
-   overflow: hidden;
- }
- .avatar-uploader .el-upload:hover {
-   border-color: #409EFF;
- }
-
- .avatar-uploader-icon {
-   font-size: 28px;
-   color: #8c939d;
-   width: 150px;
-   height: 150px;
-   line-height: 150px;
-   text-align: center;
- }
 </style>

src/views/qw/drainageLink/type2.vue

@@ -150,16 +150,7 @@
           <el-input v-model="form.name" placeholder="请输入链接名称" />
         </el-form-item>
         <el-form-item label="入群链接" prop="qrCode" >
-          <el-upload
-             v-model="form.qrCode"
-             class="avatar-uploader"
-             :action="uploadUrl"
-             :show-file-list="false"
-             :on-success="handleAvatarSuccess2"
-             :before-upload="beforeAvatarUpload">
-             <img v-if="form.qrCode" :src="form.qrCode" class="avatar" width="300px">
-             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.qrCode" :limit="1" />
 
         </el-form-item>
 
@@ -176,16 +167,7 @@
           <el-input v-model="form.companyName" placeholder="请输入企业名称" />
         </el-form-item>
         <el-form-item label="企业头像" prop="avatarUrl">
-          <el-upload
-             v-model="form.avatarUrl"
-             class="avatar-uploader"
-             :action="uploadUrl"
-             :show-file-list="false"
-             :on-success="handleAvatarSuccess"
-             :before-upload="beforeAvatarUpload">
-             <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" width="300px">
-             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.avatarUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="文案">
           <el-input v-model="form.content" placeholder="文案" type="textarea"/>
@@ -387,32 +369,6 @@ export default {
           this.msgSuccess("删除成功");
         }).catch(() => {});
     },
-    handleAvatarSuccess(res, file) {
-        if(res.code==200){
-          this.form.avatarUrl=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-    handleAvatarSuccess2(res, file) {
-        if(res.code==200){
-          this.form.qrCode=res.url;
-          self.$forceUpdate()
-        }
-        else{
-          this.msgError(res.msg);
-        }
-    },
-
-    beforeAvatarUpload(file) {
-      const isLt1M = file.size / 1024 / 1024 < 1;
-      if (!isLt1M) {
-        this.$message.error('上传图片大小不能超过 1MB!');
-      }
-      return   isLt1M;
-    },
 
     /** 导出按钮操作 */
     handleExport() {
@@ -433,24 +389,4 @@ export default {
 };
 </script>
 <style scoped>
-
-.avatar-uploader .el-upload {
-   border: 1px dashed #d9d9d9;
-   border-radius: 6px;
-   cursor: pointer;
-   position: relative;
-   overflow: hidden;
- }
- .avatar-uploader .el-upload:hover {
-   border-color: #409EFF;
- }
-
- .avatar-uploader-icon {
-   font-size: 28px;
-   color: #8c939d;
-   width: 150px;
-   height: 150px;
-   line-height: 150px;
-   text-align: center;
- }
 </style>

src/views/qw/friendWelcome/ImageUploadWeclome.vue

@@ -1,205 +1,4 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
 <script>
-import { getToken } from "@/utils/auth";
-
-export default {
-  name: "ImageUpload",
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 1,
-    },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-      default: 10,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl:"",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
-    },
-    // 上传成功回调
-    handleUploadSuccess(res,file) {
-      this.fileList.push({ name: res.url, url: res.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$message.error(
-          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-        );
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      console.log(file)
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
-};
+import ImageUpload from '@/components/ImageUpload/index.vue'
+export default ImageUpload
 </script>
-<style scoped lang="scss">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
-}
-
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
-}
-</style>
-

src/views/qw/groupMsgItem/index.vue

@@ -269,13 +269,13 @@
           <el-input v-model="form.mediaId" placeholder="请输入图片素材ID" />
         </el-form-item>
         <el-form-item label="图片的链接" prop="picUrl">
-          <el-input v-model="form.picUrl" placeholder="请输入图片的链接" />
+          <ImageUpload v-model="form.picUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="图文消息标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入图文消息标题" />
         </el-form-item>
         <el-form-item label="封面URL" prop="picurl">
-          <el-input v-model="form.picurl" placeholder="请输入封面URL" />
+          <ImageUpload v-model="form.picurl" :limit="1" />
         </el-form-item>
         <el-form-item label="消息描述" prop="description">
           <el-input v-model="form.description" placeholder="请输入消息描述" />

src/views/qw/material/ImageUpload.vue

@@ -1,205 +1,4 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
 <script>
-import { getToken } from "@/utils/auth";
-
-export default {
-  name: "ImageUpload",
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 1,
-    },
-    // 大小限制(MB)
-    fileSize: {
-        type: Number,
-        default: 10,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl:"",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
-    },
-    // 上传成功回调
-    handleUploadSuccess(res,file) {
-      this.fileList.push({ name: res.url, url: res.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$message.error(
-          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-        );
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      console.log(file)
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
-};
+import ImageUpload from '@/components/ImageUpload/index.vue'
+export default ImageUpload
 </script>
-<style scoped lang="scss">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
-}
-
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
-}
-</style>
-

src/views/qw/sop/ImageUpload.vue

@@ -1,213 +1,4 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :disabled="disabled"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
 <script>
-import { getToken } from "@/utils/auth";
-
-export default {
-  name: "ImageUpload",
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 1,
-    },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-       default: 1,
-    },
-    // 大小限制(MB)
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl:"",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSSByHOOKImage",
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-        this.$emit("change", this.listToString(this.fileList));    // 新增change事件触发
-      }
-    },
-    // 上传成功回调
-    handleUploadSuccess(res,file) {
-      this.fileList.push({ name: res.url, url: res.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.$emit("change", this.listToString(this.fileList));    // 新增change事件触发
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$message.error(
-          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-        );
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 10 / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      console.log(file)
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
-};
+import ImageUpload from '@/components/ImageUpload/index.vue'
+export default ImageUpload
 </script>
-<style scoped lang="scss">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
-}
-
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
-}
-</style>
-

src/views/qw/user/ImageUpload.vue

@@ -1,205 +1,4 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <el-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
 <script>
-import { getToken } from "@/utils/auth";
-
-export default {
-  name: "ImageUpload",
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 3,
-    },
-    // 大小限制(MB)
-    fileSize: {
-       type: Number,
-      default: 10,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      baseUrl:"",
-      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              if (item.indexOf(this.baseUrl) === -1) {
-                  item = { name: item, url: item };
-              } else {
-                  item = { name: item, url: item };
-              }
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
-    },
-    // 上传成功回调
-    handleUploadSuccess(res,file) {
-      this.fileList.push({ name: res.url, url: res.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        this.$message.error(
-          `文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`
-        );
-        return false;
-      }
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      console.log(file)
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
-};
+import ImageUpload from '@/components/ImageUpload/index.vue'
+export default ImageUpload
 </script>
-<style scoped lang="scss">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-    display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-    transition: all 0s;
-}
-
-::v-deep .el-list-enter, .el-list-leave-active {
-    opacity: 0;
-    transform: translateY(0);
-}
-</style>
-

src/views/store/healthTongue/index.vue

@@ -151,7 +151,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="舌苔图片" prop="tongueUrl">
-          <el-input v-model="form.tongueUrl" placeholder="请输入舌苔图片" />
+          <ImageUpload v-model="form.tongueUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="舌苔id" prop="tongueId">
           <el-input v-model="form.tongueId" placeholder="请输入舌苔id" />

src/views/store/myHealthTongue/index.vue

@@ -151,7 +151,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="舌苔图片" prop="tongueUrl">
-          <el-input v-model="form.tongueUrl" placeholder="请输入舌苔图片" />
+          <ImageUpload v-model="form.tongueUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="舌苔id" prop="tongueId">
           <el-input v-model="form.tongueId" placeholder="请输入舌苔id" />

src/views/store/package/index.vue

@@ -178,16 +178,7 @@
           <el-input v-model="form.secondName" placeholder="请输入套餐包别名" />
         </el-form-item>
         <el-form-item label="封面图" prop="imgUrl">
-          <el-upload
-            v-model="form.imgUrl"
-            class="avatar-uploader"
-            :action="uploadUrl"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload">
-            <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar" width="300px">
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
+          <ImageUpload v-model="form.imgUrl" :limit="1" />
         </el-form-item>
         <el-form-item label="轮播图" prop="images">
           <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
@@ -676,98 +667,8 @@ export default {
         this.tempOptions = response.rows;
       });
     },
-    handleAvatarSuccess(res, file) {
-      if (res.code == 200) {
-        this.form.imgUrl = res.url;
-        // self.$forceUpdate()
-      }
-      else {
-        this.msgError(res.msg);
-      }
-    },
-    beforeAvatarUpload(file) {
-        return new Promise((resolve, reject) => {
-          if (file.size / 1024 / 1024 > 3) {
-            this.$message.error('上传的图片不能超过3MB');
-            reject();
-            return;
-          }
-          if (file.size / 1024 > 500) {
-            const loadingInstance = Loading.service({ text: '图片内存过大正在压缩图片...' });
-            // 文件大于1MB时进行压缩
-            this.compressImage(file).then((compressedFile) => {
-              loadingInstance.close();
-              if (compressedFile.size / 1024 > 500) {
-                this.$message.error('图片压缩后仍大于500KB');
-                reject();
-              } else {
-                // this.$message.success(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-                console.log(`图片压缩成功，最终质量为: ${this.finalQuality.toFixed(2)}`);
-                console.log(`最终内存大小为: ${(compressedFile.size/1024).toFixed(2)}KB`);
-                resolve(compressedFile);
-              }
-            }).catch((err) => {
-              loadingInstance.close();
-              console.error(err);
-              reject();
-            });
-          } else {
-            resolve(file);
-          }
-        });
-      },
-      compressImage(file) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = (event) => {
-          const img = new Image();
-          img.src = event.target.result;
-          img.onload = () => {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            const width = img.width;
-            const height = img.height;
-            canvas.width = width;
-            canvas.height = height;
-            ctx.drawImage(img, 0, 0, width, height);
-
-            let quality = 1; // 初始压缩质量
-            let dataURL = canvas.toDataURL('image/jpeg', quality);
 
-            // 逐步压缩，直到图片大小小于500KB并且压缩质量不再降低
-            while (dataURL.length / 1024 > 500 && quality > 0.1) {
-              quality -= 0.01;
-              dataURL = canvas.toDataURL('image/jpeg', quality);
-            }
-            this.finalQuality = quality; // 存储最终的压缩质量
 
-            if (dataURL.length / 1024 > 500) {
-              reject(new Error('压缩后图片仍然大于500KB'));
-              return;
-            }
-
-            const arr = dataURL.split(',');
-            const mime = arr[0].match(/:(.*?);/)[1];
-            const bstr = atob(arr[1]);
-            let n = bstr.length;
-            const u8arr = new Uint8Array(n);
-            while (n--) {
-              u8arr[n] = bstr.charCodeAt(n);
-            }
-            const compressedFile = new Blob([u8arr], { type: mime });
-            compressedFile.name = file.name;
-            resolve(compressedFile);
-          };
-          img.onerror = (error) => {
-            reject(error);
-          };
-        };
-        reader.onerror = (error) => {
-          reject(error);
-        };
-      });
-    },
     changeStore() {
       this.drugList = [];
     },
@@ -1015,25 +916,4 @@ export default {
 .icon-button {
   border-radius: 0;
 }
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 150px;
-  height: 150px;
-  line-height: 150px !important;
-  text-align: center;
-}
 </style>

src/views/user/rechargeTemplate/index.vue

@@ -218,26 +218,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item label="图标" prop="iconUrl">
-              <el-upload
-                class="avatar-uploader"
-                :action="uploadFileUrl"
-                :headers="headers"
-                :show-file-list="false"
-                :on-success="handleIconSuccess"
-                :before-upload="beforeIconUpload"
-                :on-error="handleIconError"
-              >
-                <img v-if="form.iconUrl" :src="form.iconUrl" class="avatar" />
-                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-              </el-upload>
-              <div class="el-upload__tip">
-                <div v-if="form.iconUrl" style="margin-top: 10px;">
-                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleIconRemove">移除</el-button>
-                </div>
-                <div style="color: #999; font-size: 12px; margin-top: 5px;">
-                  只能上传jpg/png文件，且不超过2MB
-                </div>
-              </div>
+              <ImageUpload v-model="form.iconUrl" :limit="1" />
             </el-form-item>
           </el-col>
         </el-row>
@@ -441,9 +422,7 @@ export default {
   },
   methods: {
     parseTime,
-    handleIconRemove(){
-      this.form.iconUrl = null;
-    },
+
     /** 查询充值模板列表 */
     getList() {
       this.loading = true;
@@ -706,20 +685,7 @@ export default {
     },
 
     // 图标上传前校验
-    beforeIconUpload(file) {
-      const isJPG = file.type === 'image/jpeg';
-      const isPNG = file.type === 'image/png';
-      const isGIF = file.type === 'image/gif';
-      const isWebP = file.type === 'image/webp';
-      const isLt2M = file.size / 1024 /1024 < 2; // 限制大小为2MB
-      if (!isJPG && !isPNG && !isGIF && !isWebP) {
-        this.$message.error('上传头像图片只能是 JPG、PNG、GIF 或 WebP 格式!');
-      }
-      if (!isLt2M) {
-        this.$message.error('上传头像图片大小不能超过 2MB!');
-      }
-      return (isJPG || isPNG || isGIF || isWebP) && isLt2M;
-    },
+
 
     // 图标上传成功后处理
     handleIconUploadSuccess(response, file) {
@@ -734,15 +700,8 @@ export default {
     handleIconUploadError() {
       this.$message.error('图标上传失败，请重试');
     },
-    handleIconSuccess(response, file) {
-      // 处理图标上传成功的逻辑
-      this.form.iconUrl = response.url; // 假设返回的数据结构有URL
-      this.$message.success('图标上传成功!');
-    },
-    handleIconError(err, file) {
-      // 处理图标上传失败的逻辑
-      this.$message.error('图标上传失败，请重试.');
-    },
+
+
   }
 };
 </script>