使用alova上传文件 (content-type missing boundary )

这个请求库其实已经发布一年多了, 但是吧 好像还是 axios 和 fetch原生 称王称霸的时代,

我在未来还是很看好这个请求库的 , 毕竟要说实用性 我感觉还可以 很爽的 前端童鞋还是要勇于接受新的事物. 即使它现在不用

 import { createAlova, useRequest } from 'alova';
  import GlobalFetch from 'alova/GlobalFetch';
  import VueHook from 'alova/vue';

  // 1. 创建alova实例
  const alovaInstance = createAlova({
    // VueHook用于创建ref状态，包括请求状态loading、响应数据data、请求错误对象error等
    statesHook: VueHook,

    // 请求适配器，推荐使用fetch请求适配器
    requestAdapter: GlobalFetch(),

    // 全局的响应拦截器
    responded: response => response.json()
  });

主要是 我们使用 axios的时候 习惯将
Content-Type’: ‘multipart/form-data’
但是我用alova的时候 习惯性也来这样做

const handleUploadFile = (file) => {
    let forms = new FormData()
    forms.append('file', file)
    return alovaInstance.Post("http://192.168.1.72:3006/accept", forms)

}
const { send } = useRequest(handleUploadFile, {
    immediate: false   // 关闭默认发送
})

const handleAfterRead = (fileInfo) => {
    fileUrl.value = fileInfo.objectUrl
    send(fileInfo.file)  // 手动发送请求
}

其实这里就不需要加那个东西 因为你使用 formData 它浏览器就会自动帮你吧请求头类型 加好
看到这个文章的童鞋 我希望你们看看这个库,最好在新项目中使用下 体验杠杠的

关注我 持续更新 前端知识