图片上传一定要用formData上传吗

图片上传不一定要使用formData上传，但使用formData上传是一种常见且常用的方式。formData可以将文件数据作为请求的一部分进行传输，并且可以携带其他参数一起提交到服务器。这种方式在前端和后端的交互中较为灵活，适用于大多数场景。

除了formData，还可以使用其他方式进行图片上传，例如使用base64编码将图片数据嵌入到请求体中，或者使用二进制流直接传输图片数据。选择合适的上传方式取决于你的具体需求和后端接口的要求。

相关问题

formdata图片上传

对于多张图片的上传，可以使用form表单的方式，并设置input的multiple属性。具体代码如下所示：

<form action="http://192.168.171.144/api/xxx" method="post" enctype="multipart/form-data">
  内容content: <input name="content" type="text" />
  图片images: <input name="images" multiple="multiple" type="file" />
  <input type="submit" value="提交" />
</form>

通过以上代码，可以实现多张图片的上传功能。

另外，如果你使用的是微信小程序开发，则需要注意微信本身没有FormData对象，无法直接使用new FormData。但可以通过wx.request发送multipart/form-data请求来模拟FormData的效果。具体代码如下所示：

wx.request({
  url: app.globalData.pubUrl + '/Upload/UploadFile', // 接口地址
  method: 'post',
  header: {
    'content-type': 'multipart/form-data; boundary=XXX',
    'Authorization': app.globalData.token
  },
  data: '\r\n--XXX' +
    '\r\nContent-Disposition: form-data; name="UploadId"' +
    '\r\n' +
    '\r\n' +
    UploadId +
    '\r\n--XXX' +
    '\r\nContent-Disposition: form-data; name="IsDelete"' +
    '\r\n' +
    '\r\n' +
    IsDelete +
    '\r\n--XXX--',
  success: function (res) {
    // 接口成功返回的处理逻辑
    if (res.data.success == false) {
      wx.showToast({
        title: res.data.msg,
        icon: 'none',
        duration: 2000
      })
    }
  }
})

以上代码中，需要自行替换URL、请求参数和请求头部信息，其中UploadId和IsDelete为上传图片接口所需的参数值。

请注意，以上代码是针对微信小程序开发中的图片上传情况，如果你使用的是其他平台或开发框架，请参考对应文档进行处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [通过JS创建FormData实现上传多张图片](https://blog.csdn.net/weixin_43974265/article/details/122016416)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [小程序FormData格式传参（上传图片，删除图片）](https://blog.csdn.net/weixin_45683261/article/details/128305221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

使用FormData上传图片至接口

以下是使用FormData上传图片至接口的示例代码：

// 获取文件输入框元素
const fileInput = document.querySelector('#file-input');

// 监听文件输入框变化事件
fileInput.addEventListener('change', async () => {
  // 创建FormData对象
  const formData = new FormData();

  // 将文件添加到FormData中
  formData.append('file', fileInput.files[0]);

  try {
    // 发送POST请求，上传文件
    const response = await fetch('/api/upload', {
      method: 'POST',
      body: formData
    });

    // 处理响应数据
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
});

在上述代码中，我们首先获取了一个文件输入框元素，并监听了其变化事件。当用户选择了一个文件之后，我们创建了一个FormData对象，并将文件添加到其中。

接着，我们使用fetch函数发送了一个POST请求，将FormData作为请求体发送给后端接口。在处理响应数据时，我们使用了await关键字，以便等待异步操作完成。

注意，上述代码中的接口地址为'/api/upload'，这只是一个示例地址。实际使用时，需要将其替换为实际的接口地址。同时，也需要根据实际需要设置其他请求头、请求参数等。