el-upload 上传组件(文件格式:doc,exe，图片) 编辑后在上传，怎么将后端返回的url地址转换成el-upload 想要的raw格式

Question

el-upload 上传组件(文件格式:doc,exe，pdf，图片) 编辑后在上传，怎么将后端返回的url地址转换成el-upload 想要的raw格式

上传时代码(formData格式)
let formData = new FormData()
          if (this.fileList && this.fileList.length > 0) {
            for (let index = 0; index < this.fileList.length; index++) {
              if (this.fileList[index].raw) {
                  formData.append('files', this.fileList[index].raw)
              } 
              formData.append(`file`, this.fileList[index].name)
            }
          }
          formData.append('formData', JSON.stringify(param))

Answer 1

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

---

在使用 Vue.js 框架的 el-upload 组件上传文件时，通常需要将文件添加到 FormData 对象中，然后发送到后端。你已经展示了如何将文件添加到 FormData 中，但是提到了一个问题：如何将后端返回的 URL 地址转换为 el-upload 组件所需的 raw 格式。

首先，我们需要明确 el-upload 组件的 raw 属性通常是指文件的原始二进制数据，而 URL 地址则是文件在服务器上的路径。如果你想要在上传后将文件的 URL 地址转换为 el-upload 组件能够识别的格式，通常需要将 URL 地址转换为 Blob 对象，然后使用 URL.createObjectURL() 方法来创建一个可以识别的 URL。

以下是将后端返回的 URL 地址转换为 el-upload 需要的 raw 格式的步骤：

1. 获取后端返回的 URL：这通常是上传文件后服务器返回的响应。

2. 使用 fetch 请求获取 Blob：使用 fetch 函数向服务器请求该 URL，并将响应转换为 Blob 对象。

3. 创建可识别的 URL：使用 URL.createObjectURL() 方法将 Blob 对象转换为一个可以在浏览器中使用的 URL。

4. 更新 el-upload 组件的状态：将创建的 URL 赋值给 el-upload 组件的相应属性，例如 list-type="picture-card" 模式下的 file-list。

下面是一个示例代码：

// 假设 responseUrl 是后端返回的文件 URL
fetch(responseUrl)
  .then(response => response.blob()) // 将响应转换为 Blob
  .then(blob => {
    // 创建一个可识别的 URL
    const objectURL = URL.createObjectURL(blob);
    
    // 假设 fileList 是 el-upload 组件的文件列表
    this.fileList.push({
      name: 'example.doc', // 假设的文件名
      raw: objectURL // 将 URL 转换为 raw 格式
    });
  })
  .catch(error => {
    console.error('Error converting URL to Blob:', error);
  });

请注意，这里的 this.fileList.push 是将新的文件对象添加到 el-upload 组件的文件列表中，你需要根据你的组件状态进行相应的调整。

至于参考链接，由于你的问题比较具体，可能没有直接的教程链接，但是以下是一些可能会有帮助的资源：

• MDN Web Docs - FormData
• MDN Web Docs - fetch()
• MDN Web Docs - URL.createObjectURL()
• Element UI - el-upload 组件文档

希望这些信息能帮助你解决问题。如果还有其他疑问，欢迎继续提问。