里面的文件上传 window.addEventListener

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

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

如何允许 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

File upload inside window.addEventListener

forms

multipartform-data

onclick

addeventlistener