将JSON附加到现有表单中

Question

我正在通过博客帖子的形式从所选图像中提取出exif数据，用于我的个人网站。我想将exif数据作为格式的JSON字段发送给我。我不确定正确的方法。我的第一个想法是只输入text_area输入并将JSON的值设置到该字段中。尽管我觉得必须有更好的方法。

想法？

Answer 1

您可以这样做，将图像元数据添加为数据对象上的字段并发送：

// The elements are being instanced outside the event listener. In the event listener we can get the current value of the element
const nameInput = document.getElementById('name') 
const lastNameInput = document.getElementById('last-name')
const idInput = document.getElementById('id')

// A regular button, not a submit one
const sendBtn = document.getElementById("send-btn")

// The event that will listen the button, take the data of your fields and send it in JSON format
sendBtn.addEventListener('click', async () => {
    // The URL of your server
    const url = 'http://localhost:3000/users'

    const data = { 
        name: nameInput.value,
        lastName: lastNameInput.value,
        id: idInput.value
    }

    const request = new Request(
        url,
        {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }, // If the headers are not defined, Express doesn't recognize the data sent with JSON
            body: JSON.stringify(data)
        }
    )

    try {
        const response = await fetch( request )
        const jsonResponse = await response.json()
        // With the response of the server you have infinite posibilities.
        console.log(jsonResponse)
    } catch (e){
        alert('Error connecting with the server')
    }    
})