如何在http请求中通过表单发送图像，以及使用什么标头？

Question

我在谷歌上搜索过，但没有找到...

我对 vueJS 的看法有一个表单：

  <form @submit.prevent="avatar()" method="POST" enctype="multipart/form-data">
    <input type="file" name="profilePicture" id="profilepicture" >
    <button type="submit">Valider mon avatar?</button>
  </form>

用户发送图像。

我的问题是， 我想在函数中发送图像（由用户通过表单发送），并且该函数将图像发送到标头中的 HTTP 请求...

API 请求以 :

开头

app.post('/myupload/:iduser', async (req, res) => {
    try{
        var { iduser } = req.params ;
        const { image } = req.file ;
        [...]

我对vuejs的看法中的功能实际上是：

async function avatar() {

    console.log(document.getElementById("profilepicture").value);
    // for having the image sending src

    let response = await fetch(`http://localhost:196/myupload/${MyTokenStore.myid}`, {
      method: "POST",
      headers: {
      "Content-Type": "multipart/form-data",
      },
  
      body: JSON.stringify(document.getElementById("profilepicture").value)
    })
      .then((response) => response.json())
      .catch((error) => {
      console.log("Failed", error)
      });
  
    if(response.error){
      alert(response.message);
      return
    }
  }

但是我在请求中唯一的参数是src图像的字符串，错误伺服器是：

TypeError：无法解构“req.files”的属性“image”，因为它未定义。

拜托，我需要帮助，当我直接转到请求的 URL 时请求运行（但浏览器直接显示服务器响应）：

  <form :action="`http://localhost:196/myupload/${MyTokenStore.myid}`" 
   method="POST" enctype="multipart/form-data">
    <input type="file" name="image"/>
    <button type="submit">Valider mon avatar</button>
  </form>

但是我没能将它放入函数中...

Answer 1

要从执行请求的 Vue 发送图像，您必须使用

FormData

对象。例如：

   /**
   * @description - register user
   */
  const register = async () => {
    try {
      const fd = new FormData();

      Object.keys(user.value).forEach((key) => {
        fd.append(key, user.value[key]);
      });

      const res = await axios.post('/register', fd, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      });
      toast.success(res.data);
    } catch (err) {
      console.log(err);
      toast.error(err.response.data);
    }
  };

在前面的代码中，在

register

中，我使用

FormData

将

user

对象发送到后端。以前，您应该设置它。我做了如下示例：

const setProfileImage = (e) => {
 image_preview.value = URL.createObjectURL(e.target.files[0]);
 document.getElementById('image_preview').style.height = '150px';
 document.getElementById('image_preview').style.width = '150px';
 user.value.profile_image = e.target.files[0]; // this is important for you.
 user.value.image = e.target.files[0].name;
};

setProfileImage

正在从

event

接收

Input file

。如果你看到我在代码中写的注释，

user.value.profile_image = e.target.files[0]

就是整个文件。剩下的就是显示图像并将名称发送到数据库中。

       <div class="mb-3">
      <label
          for="profile_image"
          class="bg-primary text-white rounded-3 text-center w-100 p-2 profile_image"
      >
        Seleccione su foto de perfil <i class="ps-1 bi bi-card-image"></i>
      </label>
      <input
          type="file"
          class="form-control d-none"
          id="profile_image"
          placeholder="Adjunte su foto de perfil"
          @change="setProfileImage"
      />
    </div>

这就是我所说的

Input file

。该事件是正确捕获文件的

@change

。

希望它对你有用。