上传图片，base64改为文件流，并转给后端

需求：

html代码：

 <el-dialog v-model="dialogPicVisible" title="新增图片" width="500">
      <el-form :model="picForm">
        <el-form-item label="图片名称：" :label-width="100">
          <el-input v-model="picForm.picName" clearable />
        </el-form-item>
        <el-form-item label="新增图片：" prop="img" :label-width="100">
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="uploadFn"
          >
            <img v-if="picForm.file" :src="picForm.file" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogPicVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitPicBtn"> 确 认 </el-button>
        </div>
      </template>
    </el-dialog>

这是base64转文件流的代码

// base64转文件流
function base64ToFile(base64Data, filename) {
  // 将base64的数据部分提取出来
  const parts = base64Data.split(";base64,");
  const contentType = parts[0].split(":")[1];
  let strArr = contentType.split("/");
  console.log('strArr',strArr)
  const raw = window.atob(parts[1]);
  // 将原始数据转换为Uint8Array
  const rawLength = raw.length;
  const uInt8Array = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  // 使用Blob和提取出的数据内容创建一个新的Blob对象
  const blob = new Blob([uInt8Array], { type: contentType });
  // 创建一个指向Blob对象的URL，并使用这个URL创建一个File对象
  const blobUrl = URL.createObjectURL(blob);
  const newFilename = filename + '.' + strArr[1]

  const file = new File([blob], newFilename, { type: contentType });
  // 返回File对象
  return file;
}

这是确认提交的逻辑

function submitPicBtn() {
  const file = base64ToFile(picForm.file, picForm.picName);
  console.log('file',file)
  let strArr = file.type.split("/");
  var fileForm = new FormData();
  fileForm.append("classifyId", form.classifyId);
  fileForm.append("file", file);
  var newPicName = picForm.picName + "." + strArr[1];
  fileForm.append("picName", newPicName);
  axios
    .post("/h5htglpt/api/uploadPic", fileForm, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res) => {
      console.log('res',res)
      if (res.data.code == "0") {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        dialogPicVisible.value = false
        getTreeList();
      }
    })
    .catch((error) => {});
}

打印上传成功后的file 注意：name需要拼接图片类型的后缀

这是css的代码

.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  margin: 10px 0;
  font-weight: bold;
  letter-spacing: 1px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

::v-deep .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;
}