vue3利用axios和 URL.createObjectURL(file.raw)上传文件

在Vue3中，你可以使用axios和URL.createObjectURL(file.raw)来上传文件。首先，你需要安装axios并将其引入到你的项目中。然后，你可以使用FormData对象来构建上传的数据，并通过axios发送POST请求来上传文件。以下是一个示例代码：

import axios from 'axios';

// 定义一个上传文件的方法
async function uploadFile(file) {
  // 创建一个FormData对象
  const formData = new FormData();
  formData.append('file', file);

  try {
    // 发送POST请求并上传文件
    const response = await axios.post('/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });

    console.log('文件上传成功:', response.data);
  } catch (error) {
    console.error('文件上传失败:', error);
  }
}

在上面的示例中，我们将文件添加到FormData对象中，然后使用axios.post方法发送POST请求，将FormData作为请求主体发送到服务器的`/upload`端点。请确保将适当的服务器端点替换为你自己的上传路径。

关于URL.createObjectURL(file.raw)，它可以用来生成一个临时的URL，该URL可以在浏览器中显示该文件。你可以将其用于预览或其他需要显示文件的场景。以下是一个示例代码：

// 创建一个临时URL来显示文件
function displayFile(file) {
  const fileURL = URL.createObjectURL(file.raw);
  console.log('文件URL:', fileURL);

  // 在页面上显示文件
  const fileElement = document.createElement('a');
  fileElement.href = fileURL;
  fileElement.target = '_blank';
  fileElement.innerText = '点击查看文件';
  document.body.appendChild(fileElement);
}

在上面的示例中，我们使用URL.createObjectURL(file.raw)来创建一个临时URL，并将其用于创建一个`<a>`元素，以便在浏览器中显示文件。你可以根据自己的需求进行修改和调整。