Question

我的大脑受伤了。我的页面加载后，我得到一些HTML。这是一个精简版：

window.addEventListener('load', () => {
  if (window.location.pathname === '/profile' && Cookies.get('token')) {
    axios.get('/api/profile-info').then(res => {
      const member = res.data.member
      const memberInfo = `
        <form enctype="multipart/form-data" id="uploadProfilePictureForm">
          <input type="file"/>
          <button onclick="uploadPicture(event)">Upload</button>
        </form>
      `;
    })
  }
})

然后我处理onclick事件：

const uploadPicture = (event) => {
  event.preventDefault()
  const form = document.getElementById('uploadProfilePictureForm')
  console.log(form) // Just shows the HTML form
}

此处理程序位于之前 window.addEventListener

文件名出现在页面上，但点击“上传”后，它不会显示在控制台中（我打算发送到我的服务器）。

如何允许onclick事件处理文件上传？

Answer 1

<强>解决

在window.addEventListener()内，我使用了一个简单的输入标记：

<input type="file" id="fileUpload" onchange="uploadPicture()"/>

然后，在这个事件监听器之外，我定义了uploadPicture()函数：

function uploadPicture() {
  var FD = new FormData()
  var fileInput = document.getElementById('fileUpload')
  FD.append("pictureFile", fileInput.files[0])
  const data = FD.entries().next().value
  console.log('data\n', data) // This is the FormData array
}

在window.addEventListener中上传文件

1 个答案: