element文件上传（导入）表单形式和blob流形式

element部分的代码……

<el-upload
      class="upload_area"
      action="#"
      auto-upload
      name="pic"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleAvatarSuccess"
      v-loading="uploading"
      ><div class="tip_class">
        <div>点击选择文件</div>
      </div>
    </el-upload>

FormData 对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
2. 异步上传二进制文件。

1.表单形式

const beforeUpload = async (rawFile) => {
  if (rawFile.type != "image/jpeg" && rawFile.type != "image/png") {
    ElMessage.error("当前仅支持.jpg.png格式文件");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("上传文件大小不超过2MB!");
    return false;
  }
  //转form格式用于上传后台
  let data = new FormData();
  data.append("file", rawFile);
  data.append("size", 10);
  data.append("prev", true);
  data.append("fileName", rawFile.name);
  await fileInfoVector(data).then((res) => {
    if (res.success) {
     //一般后端会返回图片的地址，或者别的信息用于资源的展示
    }
  });
  //转base64回显，如果后端没有提供地址我们也可以自己转
  let reader = new FileReader();
  reader.readAsDataURL(rawFile); //将文件读取为 DataURL(base64)
  reader.onload = function (evt) {
    imageUrl.value = evt.target.result;
  };
};

2.blob流形式

//上传
const beforeUpdate = ({ files: file, code }) => {
  if (file.length && showDraw.value && !initData.value[code]) {
    //上传文件大小限制
    const uploadLimit = 5;
    //目前是一对一的上传，所以先写死
    file.status = "uploading";
    const isRightSize = (file[0].size || 0) / 1024 / 1024 < uploadLimit;
    if (!isRightSize) {
      ElMessage.error("文件大小超过 " + uploadLimit + "MB");
      return false;
    }
    //转bolb值
    const _file = file[0].raw;
    checkFileBeforUpload(_file, "sysfile").then((res) => {
      if (res.success) {
         //……
      }
    });
  }