一、html

 <!--上传照片 -->
              <div class="list_item flexed align-item-start">
                <div class="item_label">上传照片：</div>
                <el-upload
                  class="avatar-uploade item_picture"
                  action=""
                  :show-file-list="false"
                  :http-request="(file) => httpRequestUpload(file, 'Avatar')"
                  @change="onChangeAvatar"
                >
                  <img
                    v-if="userResume.avatar"
                    :src="store.pictureUrl + userResume.avatar"
                    class="avatar"
                    @click.stop
                  />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                  <div class="handle_container">
                    <div class="flexed align-items-center">
                      <!-- 编辑， -->
                      <el-icon :size="16" color="rgba(195, 13, 35, 1)"
                        ><Edit
                      /></el-icon>
                      <div class="item_handle edit">编辑</div>
                    </div>
                  </div>
                </el-upload>
              </div>

二、css

.list_item {
          height: auto;
          .item_label {
            width: 80px;
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 22px;
            color: rgba(102, 102, 102, 1);
          }
          .item_input {
            height: 50px;
            border-radius: 4px;
            background: rgba(247, 248, 250, 1);
            font-size: 16px;
            font-weight: 400;
          }
          .item_inputPlacer {
            color: rgba(153, 153, 153, 1);
          }
          .item_choise {
            height: 50px;
            opacity: 1;
            border-radius: 4px;
            background: rgba(247, 248, 250, 1);
            font-size: 16px;
            font-weight: 400;
            text-align: center;
            line-height: 50px;
          }
          .item_choise.default {
            color: rgba(153, 153, 153, 1);
          }
          .item_choise.active {
            color: rgba(195, 13, 35, 1);
            box-shadow: 0 0 2px rgba(195, 13, 35, 1) inset;
          }
          .item_picture {
            width: 130px;
            height: 130px;
            border-radius: 4px;
            background: rgba(247, 248, 250, 1);
            .avatar {
              width: 130px;
              height: 130px;
            }
            .handle_container {
              margin: 115px 0 0 10px;
              .item_handle {
                width: 30px;
                height: 16px;
                font-size: 14px;
                line-height: 16px;
                margin: 0 0 0 4px;
              }
              .edit {
                color: rgba(195, 13, 35, 1);
              }
              .delete {
                color: rgba(102, 102, 102, 1);
              }
              .handle_height {
                margin: 20px 0 0 0;
              }
            }
          }
        }

三、js

// 图片上传函数
const httpRequestUpload = (params, type) => {
  const file = params.file;
  switch (type) {
    case "Avatar":
      if (file.size / 1024 / 1024 > 10) {
        ElMessage.error("图片过大,请重新上传图片");
        return false;
      } else {
        let requireParameter = {
          fileNames: [file.name],
          fileType: "IMAGE",
        };
        uploadFile(requireParameter).then((res) => {
          upDateOss(res, file)
            .then((ossRes) => {
              if (res.code == 200) {
                store.saveUserAvatar(ossRes.keyValue);
                console.log("UserAvatar", store.userAvatar);
                return false;
              } else {
                ElMessage.error(res.message);
              }
            })
            .catch((error) => {
              ElMessage.error(error.message);
            });
        });
      }
    case "Video":
      if (file.size / 1024 / 1024 > 200) {
        ElMessage.error("视频最大可上传：200M");
        return false;
      } else {
        let requireParameter = {
          fileNames: [file.name],
          fileType: "IMAGE",
        };
        uploadFile(requireParameter).then((res) => {
          upDateOss(res, file)
            .then((ossRes) => {
              if (res.code == 200) {
                store.saveUserVideo(ossRes.keyValue);
                console.log("UserVideo", store.userVideo);
                return false;
              } else {
                ElMessage.error(res.message);
              }
            })
            .catch((error) => {
              ElMessage.error(error.message);
            });
        });
      }
  }
};
// 改变头像
const onChangeAvatar = () => {
  userResume.value.avatar = store.userAvatar;
  console.log(userResume.value.avatar);
};

// 关于简历的api
import {
    useIndexStore
} from "@/stores/index";
const store = useIndexStore();

import {
    fetchGetOrDeleteOrPut,
    fetchPost
} from '@/utils/request.js'
// 上传图片
export function upDateOss(res, file, type) {
    let keyValue = res.data.dirs[0];
    let formData = new FormData();
    formData.append('OSSAccessKeyId', res.data.accessId) // //accessKeyId
    formData.append('policy', res.data.policy) // policy
    formData.append('signature', res.data.signature) //签名
    formData.append('key', res.data.dirs[0]) // 文件名称
    formData.append('file', file.file ? file.file : file, file.file ? file.file.name : file.name) // 如果是base64文件，那么直接把base64字符串转成base64
    return new Promise((resolve, reject) => {
        fetchPost(res.data.host, formData, {
            headers: {
                'Content-Type': 'multipart/form-data'
            },
        }).then((rep) => {
            store.savePictureUrl();
            resolve({
                rep,
                keyValue
            })
        }).catch((err) => {
            reject(err)
        })
    })
}
export function uploadFile(parameter) {
    return fetchPost('common/material/v1/signature', parameter)
}