单图片上传组件

杨泽宇
1 parent 0ab68841
Showing 3 changed files with 189 additions and 21 deletions
src/components/Pagination/index.vue
src/components/Uploader/index.vue
src/views/property/edit.vue
 <script setup lang="ts">
 /**
- * 单个图片上传公共组件
+ * 分页
  * @module Pagination
  */
  
+<script setup lang="ts">
+/**
+ * 单个图片上传公共组件
+ * @module Pagination
+ */
+import { ref, reactive } from "vue";
+import * as store from "@/pinia/index";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import type {
+  ElUploadProgressEvent,
+  ElFile,
+} from "element-plus/es/components/upload/src/upload.type";
+/**
+ * @description 组件属性
+ * @prop {string | null} tagName 标签
+ * @prop {number | null} maxSize 允许上传的最大图片尺寸 default = 1 means 1MB
+ * @prop {array<string>} formats 允许上传的图片格式
+ * @prop {string | null} defaultUrl 默认图片
+ * @prop {string | null} moduleName 上传接口需要传的module值
+ * @prop {string | null} showType 组件类型，横图=horizontal(4:3)，竖图=vertical(3:4)，正图=square(1:1)，小正图=mini(1:1)，default=null=""=horizontal
+ * @prop {string} tip 上传须知
+ */
+interface Props {
+  tagName: string;
+  maxSize?: number;
+  formats?: string[];
+  defaultUrl?: object;
+  showType?: string;
+  moduleName?: string;
+  tip?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  formats: () => [
+    "image/jpeg",
+    "image/gif",
+    "image/png",
+    "image/x-icon",
+    "image/svg+xml",
+    "image/webp",
+  ],
+  maxSize: 1, 
+  defaultUrl: {
+    type: Object,
+    default: {
+      value: ''
+    }
+  },
+  showType: "horizontal",
+  moduleName: "test",
+  tip: "支持16：9 的图片，建议最佳尺寸：750*422，大小不能超过500KB",
+});
+/**
+ * @description 上传图片接口配置
+ */
+const uploadSettings = reactive({
+  uploadUrl: `${import.meta.env.VITE_BASE_URL}upload/uploadPicSource?module=${
+    props.moduleName
+  }`,
+  headers: {
+    type: "formData",
+    "X-Token": store.family.loginStore().token,
+  },
+});
+/**
+ * @method handleAvatarSuccess
+ * @description 图片上传成功
+ * @param {object} res 接口返回信息
+ */
+const handleAvatarSuccess = (res: ElUploadProgressEvent) => {
+  ElMessage.success("图片上传成功");
+  props.defaultUrl.value = res?.data;
+  emit("imageChange", res?.data, props.tagName);
+};
+/**
+ * @method beforeAvatarUpload
+ * @description 图片上传之前检查格式、最大尺寸
+ * @param {ElFile} file 文件对象
+ */
+const beforeAvatarUpload = (file: ElFile) => {
+  const isFormatAllowed = props.formats.includes(file.type);
+  const isSizeAllowed = file.size / 1024 / 1024 < props.maxSize;
+  if (!isFormatAllowed) {
+    ElMessage.error("图片格式不支持");
+  }
+  if (!isSizeAllowed) {
+    ElMessage.error("图片尺寸过大");
+  }
+  return isFormatAllowed && isSizeAllowed;
+};
+const emit = defineEmits<{
+  (e: "imageChange", url: string, tagName: string): void;
+}>();
+</script>
+
+<template>
+  <div class="uploader-container">
+    <el-upload
+      class="avatar-uploader"
+      :with-credentials="true"
+      :show-file-list="false"
+      :action="uploadSettings.uploadUrl"
+      :headers="uploadSettings.headers"
+      name="multipartFile"
+      :on-success="handleAvatarSuccess"
+      :before-upload="beforeAvatarUpload"
+    >
+      <img
+        v-if="props.defaultUrl.value"
+        :src="props.defaultUrl.value"
+        class="avatar"
+        :class="props.showType"
+      />
+      <el-icon v-else class="avatar-uploader-icon" :class="props.showType"
+        ><plus
+      /></el-icon>
+    </el-upload>
+    <div class="tip">{{ props.tip }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.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;
+  text-align: center;
+  border: 1px dashed #d9d9d9;
+}
+.avatar {
+  display: block;
+}
+.tip {
+  color: #606266;
+  font-size: 12px;
+}
+
+.square {
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+}
+.mini {
+  width: 90px;
+  height: 90px;
+  line-height: 90px;
+}
+.horizontal {
+  width: 180px;
+  height: 135px;
+  line-height: 135px;
+}
+.vertical {
+  width: 135px;
+  height: 180px;
+  line-height: 180px;
+}
+</style>
@@ -2,8 +2,9 @@
 import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { propertyAdd } from "@/api/property";
 import { useRoute } from "vue-router";
-import { back } from '@/utils/tool';
+import { back } from "@/utils/tool";
 import { validMobile } from "@/utils/validate";
+import Uploader from "@/components/Uploader/index.vue";
 import type { ElForm } from "element-plus";
 const {
   appContext: {
@@ -27,6 +28,9 @@ let form = reactive({
     status: 0,
   },
 });
+const handleImageChange = (url: string, tagName: string) => {
+  form.data[tagName] = url;
+};
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 /**
  * 手机号校验
@@ -187,11 +191,7 @@ onMounted(() =&gt; {
             placeholder="请选择地区"
             clearable
           >
-            <el-option
-              label="北京"
-              value="北京"
-            >
-            </el-option>
+            <el-option label="北京" value="北京"> </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="详细地址" prop="address" style="width: 100%">
@@ -206,18 +206,18 @@ onMounted(() =&gt; {
           prop="businessLicense"
           style="width: 50%"
         >
-          <el-input
-            v-model.trim="form.data.businessLicense"
-            placeholder="请填写营业执照"
-            maxlength="1500"
-          />
+          <Uploader
+            :defaultUrl="{ value: form.data.businessLicense }"
+            tagName="businessLicense"
+            @imageChange="handleImageChange"
+          ></Uploader>
         </el-form-item>
         <el-form-item label="物业LOGO" prop="logo" style="width: 50%">
-          <el-input
-            v-model.trim="form.data.logo"
-            placeholder="请填写物业LOGO"
-            maxlength="1500"
-          />
+          <Uploader
+            :defaultUrl="{ value: form.data.logo }"
+            tagName="logo"
+            @imageChange="handleImageChange"
+          ></Uploader>
         </el-form-item>
         <el-form-item label="合同编号" prop="contractNumber" style="width: 50%">
           <el-input
@@ -234,7 +234,10 @@ onMounted(() =&gt; {
           />
         </el-form-item>
         <el-form-item label="类型" prop="type" style="width: 50%">
-          <el-select v-model="form.data.type" :disabled="form.dataType === 'edit'">
+          <el-select
+            v-model="form.data.type"
+            :disabled="form.dataType === 'edit'"
+          >
             <el-option label="物业" value="1"></el-option>
             <el-option label="公益" value="2"></el-option>
           </el-select>
@@ -246,9 +249,7 @@ onMounted(() =&gt; {
           <el-button type="info" @click="resetForm(ruleFormRef)"
             >取消</el-button
           >
-          <el-button type="info" @click="back"
-            >返回</el-button
-          >
+          <el-button type="info" @click="back">返回</el-button>
         </el-form-item>
       </el-form>
     </el-card>