注意事项图片

src/style/newLogin.scss

@@ -40,7 +40,7 @@
                 margin: 30px 0;
                 .login_panel_form_title_logo {
                     width: 90px;
-                    height: 72px;
+                    height: 90px;
                 }
                 .login_panel_form_title_p {
                     font-size: 40px;

src/view/hospital/index.vue

@@ -9,7 +9,7 @@ import _ from 'lodash'
 // import { toSQLLine } from '@/utils/stringFun'
 // import WarningBar from '@/components/warningBar/warningBar.vue'
 import ckEditor from '@/components/richText/ckEditor5.vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
@@ -220,6 +220,55 @@ function del_ro_func(i, type) {
     todo_list.value.splice(i, 1)
   }
 }
+// 图片上传
+const uploading_form = reactive({
+  uploading:false,
+  progressStatus:'info',
+  percentage:0, // 进度条
+})
+function init_uploading() {
+  uploading_form.uploading = false
+  uploading_form.progressStatus = 'info'
+  uploading_form.percentage = 0
+}
+function handleAvatarSuccess(res) {
+  console.log("res is ====",res)
+  note_list.value[note_list_item_index.value].content = res.data.file.url
+  
+  uploading_form.progressStatus = 'info'
+  uploading_form.percentage = 100
+  setTimeout(() => {
+    init_uploading()
+  },500)
+}
+function beforeAvatarUpload(file) {
+  init_uploading()
+  uploading_form.uploading = true
+  const isLt05M = file.size / 1024 / 1024 < 20
+  const isJPG = file.type.indexOf('image/') === -1
+  if (isJPG) {
+    uploading_form.uploading = false
+    uploading_form.progressStatus = 'warning'
+    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
+  }
+  if (!isLt05M) {
+    uploading_form.uploading = false
+    uploading_form.progressStatus = 'warning'
+    ElMessage.error('上传头像图片大小不能超过 2M!')
+  }
+  let interval = Math.random(100)*100
+  console.log("interval is ====",interval)
+  setInterval(() => {
+    if(uploading_form.percentage < interval) {
+      uploading_form.percentage += 1
+    }
+  },10)
+  return !isJPG && isLt05M
+}
+const note_list_item_index = ref(0)
+function beforeUploadImg(i) {
+  note_list_item_index.value = i
+}
 </script>
 <template>
   <div>
@@ -353,7 +402,24 @@ function del_ro_func(i, type) {
                 <div class="ic-right-row">
                   <div class="icr-left">注意事项</div>
                   <div class="icr-right">
-                    <el-input autosize type="textarea" v-model="item.content" />
+                    <!-- <el-input autosize type="textarea" v-model="item.content" /> -->
+                    <el-upload
+                      class="avatar-uploader"
+                      :action="`${path}/fileUploadAndDownload/upload`"
+                      :headers="{ 'x-token': userStore.token }"
+                      :show-file-list="false"
+                      :on-success="handleAvatarSuccess"
+                      :before-upload="beforeAvatarUpload"
+                      @click="beforeUploadImg(i)"
+                    >
+                      <div class="progress-box" v-if="uploading_form.uploading">
+                        <el-progress class="progress-item" :percentage="uploading_form.percentage" :status="uploading_form.progressStatus"  />
+                      </div>
+                      <img v-if="item.content" :src="item.content" class="img-container">
+                      <el-icon v-else class="avatar-uploader-icon">
+                        <Plus />
+                      </el-icon>
+                    </el-upload>
                   </div>
                 </div>
                 <div class="ic-right-row">
@@ -408,6 +474,27 @@ function del_ro_func(i, type) {
   </div>
 </template>
 <style scoped lang="scss">
+.progress-box{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background: #0000001c;
+  justify-content: center;
+  // z-index: 100;
+  .progress-item{
+    width: 90%;
+    :deep(.el-progress__text) {
+      min-width: 10px;
+    }
+  }
+}
+.img-container {
+    width: 200px;
+    height: 150px;
+}
+
 .add-row-btn:hover{
   background-color: rgb(244, 244, 244);
 }