el-upload上传图片遇到的问题

Question

问题描述:
在下面的代码中，我使用el-upload上传了一张图片，经输出，在handleChange及confirmSaveCfg方法中输出的selectFile都为File类型，且包含uid、lastModified等多个字段

但我在点击confirmSaveCfg提交到后端时，file的参数却变成了{uid:112121212}这个，而不是之前的File类型，这到底是什么原因呢？

      <el-form
        label-position="right"
        label-width="auto"
        :model="state.cfgForm"
        style="max-width: 600px"
      >
        <el-form-item label="网站名称">
          <el-input v-model="state.cfgForm.proTitle" />
        </el-form-item>
        <el-form-item label="网站logo地址">
          <!-- <el-input type="file" v-model="state.cfgForm.logoPath"></el-input> -->
          <el-upload
            ref="uploadRef"
            action="#"
            :limit="1"
            :on-exceed="handleExceed"
            :on-change="handleChange"
            :auto-upload="false"
            accept="image/jpeg, image/png"
          >
            <template #trigger>
              <el-button type="primary" @click="handleUploadClick">上传logo图片</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip text-red">
                请上传特定尺寸的png或者jpg图片
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>


const handleChange = (file: any, fileList:CustomFile[]) => {
  console.log('chnage file', file);
  state.selectFile = file.raw
  console.log('selectFile', state.selectFile);
  
}

// 保存配置项
const confirmSaveCfg = () => {
  console.log('selectFile', state.selectFile);
  
  if (state.selectFile) {
    // 参数改成formData类型
    let params = new FormData()
    params.append('title', state.cfgForm.proTitle)
    params.append('file', state.selectFile)
    // 将文件上传到服务器，并获取返回的url
    uploadTitleAndLogo(params).then(async res => {
      console.log('res', res);
      
      // if (response.success == true) {
      //   state.cfgForm.logoPath = response.data
      //   await configStore.setLogoUrl(response.data)
      //   ElMessage.success('上传成功')
      // } else {
      //   console.log("后端传回报错信息")
      // }
    })
  } else {
    ElMessage.error('请选择要上传的图片')
  }
}

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据你提供的信息，你在使用 el-upload 组件上传图片时遇到了问题，具体表现为在 handleChange 和 confirmSaveCfg 方法中，selectFile 是一个完整的 File 对象，但在提交到后端时，file 参数却变成了一个只包含 uid 的对象。

这个问题可能由以下几个原因造成：

1. 提交数据格式问题：在提交数据时，可能由于某些原因导致 FormData 中的 File 对象被转换或简化了。通常，FormData 应该能够保持 File 对象的完整性。

2. 后端接收问题：后端在接收数据时可能存在问题，导致无法正确解析 File 对象。

3. 前端数据处理问题：在将 File 对象添加到 FormData 之前，可能存在某些逻辑错误或数据处理不当。

为了解决这个问题，你可以尝试以下步骤：

• 确保 File 对象正确添加到 FormData：检查 confirmSaveCfg 方法中 params.append('file', state.selectFile) 这一行是否正确执行，state.selectFile 应该是一个 File 对象。

• 检查网络请求：使用浏览器的开发者工具查看网络请求，确认发送到后端的数据是否包含了完整的 File 对象。

• 后端代码检查：检查后端接收文件的代码，确保它能够正确解析 multipart/form-data 类型的请求，并且能够处理 File 对象。

• 使用 console.log 或 debugger 语句：在前端代码中的关键位置添加 console.log 语句，打印出变量的状态，或者使用 debugger 语句在浏览器中调试。

• 前端类型检查：确保 TypeScript 代码中对 File 类型的使用是正确的，没有在类型转换或类型断言中出现问题。

如果上述步骤都无法解决问题，可能需要更详细的代码审查或后端日志来进一步诊断问题。

至于你提到的参考链接，目前没有直接的链接可以提供，因为这个问题比较特定，需要根据你的代码和后端实现来具体分析。不过，你可以查看 Element UI 的官方文档和 Vue.js 的相关资源来获取更多信息：

• Element UI Upload 组件文档
• Vue.js 官方文档关于文件上传

希望这些信息能帮助你解决问题。如果还有其他问题或需要进一步的帮助，请随时告诉我。