图片上传优化

rain

2025-04-23 635a231af32a829b00c22f92f62143560d7a1adf

图片上传优化

 src/views/tickets/ticket.vue

@@ -131,11 +131,20 @@
            </el-col>
            <el-col :span="12">
              <el-form-item label="附件图片" prop="photos" required class="upload-wrapper">
                <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
                  :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload"
                  :file-list="form.photos" :limit="1" accept="image/*" class="uploader">
                  <span
                    style="font-size: 32px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">+</span>
                <el-upload ref="upload" 
                  :action="'#'" 
                  :auto-upload="false" 
                  list-type="picture-card"
                  :on-change="handleFileChange" 
                  :on-remove="handleUploadRemove" 
                  :before-upload="beforeUpload"
                  :file-list="form.photos" 
                  :limit="1" 
                  accept="image/*" 
                  class="create-upload">
                  <template v-if="form.photos.length < 1">
                    <i class="el-icon-plus">+</i>
                  </template>
                </el-upload>
                <div class="upload-tip">支持jpg/png格式图片，单张不超过5MB</div>
              </el-form-item>
@@ -273,11 +282,21 @@
        <!-- 上传图片 -->
        <div v-if="[3, 4].includes(currentDetail.status)" class="form-section" style="margin-bottom: 32px;">
          <div class="section-title" v-if="hasProcessedAndOverBtnPermission()">上传图片</div>
          <el-upload v-if="hasProcessedAndOverBtnPermission()" ref="upload" :action="'#'" :auto-upload="false"
            list-type="picture-card" :on-change="handleFileChange" :on-remove="handleUploadRemove"
            :before-upload="beforeUpload" :file-list="[]" :limit="1" accept="image/*">
            <span
              style="font-size: 32px; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">+</span>
          <el-upload v-if="hasProcessedAndOverBtnPermission()" 
            ref="upload" 
            :action="'#'" 
            :auto-upload="false"
            list-type="picture-card" 
            :on-change="handleFileChange" 
            :on-remove="handleUploadRemove"
            :before-upload="beforeUpload" 
            :file-list="currentDetail.photos || []" 
            :limit="1"
            accept="image/*"
            class="detail-upload">
            <template v-if="!currentDetail.photos || currentDetail.photos.length < 1">
              <i class="el-icon-plus">+</i>
            </template>
          </el-upload>
          <div class="el-upload__tip" style="margin-top: 12px;" v-if="hasProcessedAndOverBtnPermission()">
            （上传照片即可完结工单，只能上传jpg、jpeg、png照片,且不超过5M）
@@ -2723,4 +2742,53 @@
    }
  }
}

/* 新建工单和处理工单的上传组件样式 */
.create-upload,
.detail-upload {
  :deep(.el-upload--picture-card) {
    width: 120px;
    height: 100px;
    line-height: 100px;
  }
  
  /* 隐藏额外的上传按钮 */
  :deep(.el-upload.el-upload--picture-card) {
    display: none;
  }
  
  /* 当没有图片时显示上传按钮 */
  :deep(.el-upload.el-upload--picture-card:first-child) {
    display: flex;
  }

  /* 上传组件的预览图片样式 */
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 120px;
    height: 100px;
  }
}

/* 事件图片和处理图片的预览样式 */
.media-content {
  :deep(.el-image) {
    width: 700px !important;
    height: 520px !important;
    
    .el-image__inner {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}

/* 原有图片预览的样式 */
.el-image-viewer__wrapper {
  :deep(.el-image-viewer__img) {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}
</style>