From 42decdb662bff054ac86c14f781830a613e50c26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Sun, 26 Dec 2021 12:55:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(SingleUpload.vue):=20upload=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=B0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/file.ts                 |   9 ++
 src/components/Upload/SingleUpload.vue | 123 +++++++++++++++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 src/api/system/file.ts
 create mode 100644 src/components/Upload/SingleUpload.vue

diff --git a/src/api/system/file.ts b/src/api/system/file.ts
new file mode 100644
index 00000000..a991ed74
--- /dev/null
+++ b/src/api/system/file.ts
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function deleteFile(path: string) {
+    return request({
+        url: '/youlai-admin/api/v1/files',
+        method: 'delete',
+        params: {path: path}
+    })
+}
diff --git a/src/components/Upload/SingleUpload.vue b/src/components/Upload/SingleUpload.vue
new file mode 100644
index 00000000..5c28926d
--- /dev/null
+++ b/src/components/Upload/SingleUpload.vue
@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <el-upload
+        class="image-uploader"
+        :headers="headers"
+        :action="uploadAction"
+        :show-file-list="false"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :on-exceed="handleExceed"
+        :on-remove="handleRemove"
+        :limit="props.maxCount"
+        :on-preview="handlePreview"
+    >
+      <img v-if="imgUrl" :src="imgUrl" class="image"/>
+      <el-icon v-else class="image-uploader-icon">
+        <plus/>
+      </el-icon>
+    </el-upload>
+
+    <el-dialog v-model="viewDialogVisible">
+      <img width="100%" :src="viewImgUrl">
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineEmits, computed, reactive, toRefs, ref, watch} from "vue";
+import {Plus} from '@element-plus/icons-vue'
+import {ElMessage} from "element-plus"
+import {deleteFile} from "@api/system/file";
+import {Local} from "@utils/storage";
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  maxCount: {
+    type: Number,
+    default: 1
+  }
+})
+
+const state = reactive({
+  uploadAction: '/dev-api/youlai-admin/api/v1/files',
+  viewImgUrl: '',
+  viewDialogVisible: false,
+  headers: {authorization: Local.get('token')}
+})
+
+const imgUrl = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  }
+})
+
+const {uploadAction, viewImgUrl, viewDialogVisible, headers} = toRefs(state)
+
+function handleUploadSuccess(response: any) {
+  const fileUrl = response.data
+  emit('update:modelValue', fileUrl)
+}
+
+function handleBeforeUpload(file: any) {
+  const isJPG = file.type === 'image/jpeg'
+  const isLt2M = file.size / 1024 / 1024 < 2
+  if (!isJPG) {
+  }
+
+  if (!isLt2M) {
+  }
+  return true
+}
+
+function handleExceed(file: any) {
+  ElMessage.warning('最多只能上传' + props.maxCount + '')
+}
+
+function handlePreview(file: any) {
+  state.viewImgUrl = imgUrl.value as string
+  state.viewDialogVisible = true
+}
+
+function handleRemove(file: any, fileList: Array<any>) {
+  deleteFile(file.url)
+  emit('update:modelValue', fileList)
+}
+</script>
+
+<style lang="scss">
+.image-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.image-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.image-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 148px;
+  height: 148px;
+  line-height: 146px;
+  text-align: center;
+}
+
+.image {
+  width: 148px;
+  height: 148px;
+  display: block;
+}
+</style>