上传图片时，显示上传进度百分比及预览该图片

页面布局样式：

html部分：

<div class="product-box">
                <h1>产品类型：</h1>
                <p>{{ designType }}</p>
                <h1>产品名称：</h1>
                <el-input
                  v-model.trim="productName"
                  placeholder="请输入产品名称"
                  size="large"
                  style="width: 230px"
                  maxlength="12"
                  show-word-limit
                ></el-input>
                <h1>效果图：</h1>
                <div class="upload-img">
                  <div class="upload-box">
                    <el-upload
                      class="upload-demo"
                      drag
                      accept=".png,.jpg,.jpeg"
                      :on-change="changeUpload"
                      :auto-upload="false"
                      :show-file-list="false"
                    >
                      <i-ep-plus />
                    </el-upload>
                  </div>
                  <div class="demo-progress">
                    <el-progress
                      type="circle"
                      :percentage="percentage"
                      :color="colors"
                    />
                  </div>
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="url"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="srcList"
                      :initial-index="4"
                      fit="cover"
                    />
                  </div>
                </div>
                <h1>设计理念：</h1>
                <div class="design-content">
                  <el-input
                    v-model="designText"
                    style="width: 100%; height: 100%"
                    placeholder="请输入设计理念"
                    type="textarea"
                    resize="none"
                    maxlength="300"
                    show-word-limit
                  />
                </div>
</div>
<div class="submit-box" style="justify-content: right">
  <button @click="submitBusiness">提交</button>
</div>

js部分：

const designType = ref("");
const showBusiness = ref(false);
const productName = ref("");
const files = ref("");
const percentage = ref(0);
const designText = ref("");
const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
];
const url = ref(null);
const srcList = ref([
  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
]);
//根据当前期数处理特色商业区设计的类型（粮食类，肉类，文创类）
const getDesignType = () => {
  switch (userStoreData.user.phase) {
    case 1:
      designType.value = "粮食类";
      break;
    case 2:
      designType.value = "肉类";
      break;
    case 3:
      designType.value = "文创类";
      break;
    default:
      designType.value = "粮食类";
      break;
  }
};
const openBusinessBox = () => {
  if ([1, 2, 3].includes(userStoreData.user.phase)) {
    showBusiness.value = true;
    getDesignType();
  } else {
    showMessage({
      type: "warning",
      message: "当前未开放特色商业区",
    });
  }
};
const closeBusiness = () => {
  showBusiness.value = false;
  //清除数据
  productName.value = "";
  files.value = "";
  designText.value = "";
  percentage.value = 0;
  url.value = null;
};
//处理进度百分比和预览图片
const changeUpload = (file) => {
  if (file.size / 1024 / 1024 > 5) {
    showMessage({
      type: "error",
      message: "图片大小不能超过5MB！",
    });
    return false;
  }
  // 重置进度条
  percentage.value = 0;
  //根据图片实际大小，实际上传进度显示百分比
  // const reader=new FileReader();
  // //处理文件读取的进度更新。FileReader 的 onprogress 事件在文件读取过程中不断触发，它提供了有关读取状态的 event 对象
  // // event.lengthComputable:检查是否可以计算文件读取的总进度,event.loaded:已读取的字节数,event.total:文件的总字节数
  // reader.onprogress=(event)=>{
  //   if(event.lengthComputable){
  //     //计算读取进度的百分比，并四舍五入到最接近的整数
  //     percentage.value=Math.round((event.loaded/event.total)*100);
  //   }
  // }
  // //在文件读取完成时触发，用于处理完成后的操作
  // reader.onloadend=()=>{
  //   percentage.value=100;  // 设置进度为100%
  //   url.value=URL.createObjectURL(file.raw); //生成一个可以用作图片源的URL,URL.createObjectURL 方法创建一个指向文件的临时URL,更新图片预览的URL
  //   srcList.value=[url.value];  // 更新预览列表
  // };
  // reader.readAsDataURL(file.raw) // 读取文件内容,并将其作为 Data URL（Base64 编码的字符串）进行读取

  //不管图片大小，百分比从0到100至少需要1秒
  const reader = new FileReader();
  const startTime = Date.now(); //记录开始读取文件的时间
  const minDuration = 1000; //进度条显示的最小时间
  reader.onprogress = (event) => {
    if (event.lengthComputable) {
      const elapsed = Date.now() - startTime;
      const progress = Math.round((event.loaded / event.total) * 100);
      percentage.value = Math.min(progress, (elapsed / minDuration) * 100); //这是将文件实际进度（progress）和最小显示时间限制的进度进行比较，取较小值,如果文件进度更新较快，进度条会跟随实际进度。如果文件进度更新较慢，进度条的显示会受到最小显示时间限制的影响
    }
  };
  reader.onloadend = () => {
    setTimeout(() => {
      percentage.value = 100;
      url.value = URL.createObjectURL(file.raw);
      srcList.value = [url.value];
    }, Math.max(0, minDuration - (Date.now() - startTime))); //确保在文件读取完成后，进度条的总显示时间至少满足最小持续时间1秒（及实际时间超过1秒，按实际时间，不足1秒，按1秒计算）
  };
  reader.readAsDataURL(file.raw);
  files.value = file.raw;
};
//提交保存特色产品数据接口
const submitBusiness = async () => {
  //判断产品名称必须有，图片和设计理念其中一个有就满足
  if (!productName.value) {
    showMessage({
      type: "warning",
      message: "产品名称还未填写，请先填写",
    });
    return;
  }
  if (!files.value && !designText.value) {
    showMessage({
      type: "warning",
      message: "效果图和设计理念需要至少完成一项，请先完成",
    });
    return;
  }
  //上传数据
  const formDate = new FormData();
  formDate.append("file", files.value);
  formDate.append("fadesName", productName.value);
  formDate.append("fadesIdea", designText.value);
  formDate.append("pastoralId", userStoreData.user.pastoralId);
  formDate.append("phase", userStoreData.user.phase);
  formDate.append("placeIndex", 1);
  formDate.append("zoneIndex", 8);
  formDate.append("createPeople", userStoreData.user.currentRoleId);
  formDate.append("fadesType", designType.value);
  try {
    const res = await proxy.$http.homes.saveDesignProduct(formDate);
    if (res && res.status == 2000) {
      showMessage({
        type: "success",
        message: "保存成功",
      });
      //关闭弹框
      closeBusiness();
    }
  } catch (error) {}
};