获取文件file给接口传递文件流_file 怎么给接口-优快云博客

文章讲述了如何在前端使用FileReader处理文件上传，包括选择文件、创建FormData、上传进度监听以及使用Ajax请求发送数据到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   <div class="ImportScores-content-Bottom-uploading">
              <div class="ImportScores-uploading-icon"></div>
              <span class="uploading-text" ref="uploadArea" @click="triggerFileInput">上传</span>
              <input type="file" ref="fileInput" style="display: none" @change="handleFileChange">
            </div>

  /***
     * 上传文件
     * ***/
    handleFileChange() {
      // 处理文件选择事件
      const fileInput = this.$refs.fileInput;
      // console.log(fileInput.files[0])
      this.selectedFile = fileInput.files[0];
      // 检查是否选择了文件

      // const reader = new FileReader();
      // //   // 读取文件完成时的回调函数
      //   reader.onload = (event) => {
      //     // event.target.result 包含文件的内容
      //     const fileContent = event.target.result;

      //     // 这里可以根据需要对文件内容进行处理
      //     console.log("File Content:", fileContent);

      //     // 将文件内容保存到组件的数据中或执行其他操作
      //     this.selectedFile = fileContent.split(',')[1];

      //   };
      //   console.log(fileInput.files[0],'/fileInput.files[0]')
      //   // 读取文件
      // reader.readAsArrayBuffer(fileInput.files[0]);
      // reader.readAsDataURL(this.selectedFile);
      // reader.readAsText(this.selectedFile);


    },
    /**
     * 确定上传文件
     * ***/
    updownEvent() {

      // 创建Blob对象
      if (!this.selectedFile) {
        console.error("No file selected for upload");
        return;
      }
      //  // 创建File对象
      // const file = new File(["First Line Text"], this.selectedFile);
      const formData = new FormData();
      formData.append("file", this.selectedFile);
      formData.append("typeFid", this.ToChannelData.testType);
      formData.append("schod", this.ToChannelData.schoolId);
      formData.append("yrId", this.ToChannelData.yearId);
      formData.append("gadeId", this.ToChannelData.gradeId);
      formData.append("sbjectId", this.ToChannelData.subjectId);
      formData.append("tstNe", this.value);

      importExaminationInfo(formData).then(res => {
        console.log(res, '上传成功')
      }).catch(err => {
        console.log(err, '上传失败')
      })
    },

切记几口那不需要...结构直接传递formData方可

当获取进度时

/***
 * 导入考试信息
 * ***/
export const importExaminationInfo = async (
  params,
  onUploadProgressCallback
) => {
  const res = await request.post(
    '',
    params,
    {
      onUploadProgress: function(progressEvent) {
        if (progressEvent.lengthComputable) {
          const uploadPercentage = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          console.log(`上传进度：${uploadPercentage}%`);

          // Call the callback with the uploadPercentage value
          if (onUploadProgressCallback) {
            onUploadProgressCallback(uploadPercentage);
          }
        } else {
          console.log('无法计算上传进度，lengthComputable is false.');
        }
      },
    },
    {}
  );
  return res;
};

   importExaminationInfo(formData, this.handleUploadProgress).then(res => {
        console.log(res, '上传成功')
      }).catch(err => {
        console.log(err, '上传失败')
      })

、、、、、、、

方法
   /**
     * 获取上传进度
     * ***/
    handleUploadProgress(uploadPercentage) {

      console.log(`上传进度：${uploadPercentage}%`);

    },