Hugging Face's logo

Spaces:
Bread-F
/
Intelligent-Medical-Guidance-Large-Model
Running

App Files Community
Intelligent-Medical-Guidance-Large-Model
File size: 4,763 Bytes 
77b0e0f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
 
<script setup lang="ts">
import { ref, watchEffect } from 'vue'
import { ElMessage, type UploadProps, type UploadProgressEvent } from 'element-plus'
import { Plus, Document } from '@element-plus/icons-vue'

import { header_authorization } from '@/api/user'

// 定义组件入参
const props = defineProps({
  fileType: {
    type: String,
    default: 'image'
  }
})

// 定义 和父组件通信的双向绑定 model
const modelFilePath = defineModel({ default: '' })

// 上传文件，上传后为本机内存地址，方便加载
const fileUrl = ref('')
watchEffect(() => {
  // 用于在编辑模式下显示图片
  fileUrl.value = modelFilePath.value
})

// 是否显示进度条
const isShowProgress = ref(false)

// 文件上传成功后的 callback
const handleFileUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  // fileUrl.value = URL.createObjectURL(uploadFile.raw!) // 生成内存地址，方便加载
  fileUrl.value = response.data
  console.info(fileUrl.value)

  modelFilePath.value = response.data // 更新父组件双向绑定的值
  isShowProgress.value = false
}

// 文件上传前的校验 callback
const beforeFileUploadUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log(rawFile)

  if (props.fileType === 'image' && rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
    ElMessage.error('商品图片必须是 PNG / JPG 格式!')
    return false
  } else if (props.fileType === 'doc' && !rawFile.name.endsWith('.md')) {
    ElMessage.error('商品说明书必须是 markdown 格式!')
    return false
  } else if (props.fileType === 'video' && rawFile.type !== 'video/mp4') {
    ElMessage.error('主播视频必须是 mp4 格式!')
    return false
  } else if (props.fileType === 'audio' && rawFile.type !== 'audio/wav') {
    ElMessage.error('主播音频必须是 wav 格式!')
    return false
  }

  if (props.fileType === 'video' && rawFile.size / 1024 / 1024 > 20) {
    ElMessage.error('主播视频文件大小不能超过 20MB!')
    return false
  } else if (props.fileType !== 'video' && rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('文件大小不能超过 2MB!')
    return false
  }

  isShowProgress.value = true
  return true
}

// 文件上传成功后的 callback
const handleFileUploadFail: UploadProps['onError'] = (error: Error) => {
  ElMessage.error('上传文件失败')
  console.error(error)
  isShowProgress.value = false
}

// 文件上传进度条
const uploadPercentage = ref(0)

// 文件上传进度回调
const handleUploadProgress = (evt: UploadProgressEvent) => {
  uploadPercentage.value = Math.floor(evt.percent)
}
</script>

<template>
  <div>
    <el-progress v-show="isShowProgress" type="circle" :percentage="uploadPercentage" />
    <!-- TODO 长时间上传后端会断开？ -->
    <el-upload
      v-show="!isShowProgress"
      class="avatar-uploader"
      action="/upload/file"
      :headers="{
        Authorization: header_authorization
      }"
      method="post"
      :drag="props.fileType !== 'video' && props.fileType !== 'audio'"
      :multiple="false"
      :show-file-list="false"
      :on-success="handleFileUploadSuccess"
      :before-upload="beforeFileUploadUpload"
      :on-progress="handleUploadProgress"
      :on-error="handleFileUploadFail"
    >
      <!-- 图片 -->
      <img
        v-if="fileUrl && props.fileType === 'image'"
        :src="fileUrl"
        class="avatar"
        @load="isShowProgress = false"
      />

      <!-- markdown 文档 -->
      <el-icon
        v-else-if="fileUrl && props.fileType === 'doc'"
        :size="50"
        class="avatar-uploader-icon"
      >
        <Document />
      </el-icon>

      <!-- 视频上传 -->
      <el-button v-else-if="props.fileType === 'video' || props.fileType === 'audio'" type="danger">
        {{ fileUrl === '' ? '上传' : '更换' }}{{ props.fileType === 'video' ? '视频' : '音频' }}
      </el-button>

      <!-- 拖动上传框 -->
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>

<style lang="scss" scoped>
// 上传图片
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style lang="scss">
// 上传图片全局 css
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

// 进度条
.el-progress--circle {
  margin-right: 15px;
}
</style>