通过前端向IPFS添加内容时出现ipfs.add is not a function

问题相关代码，请勿粘贴截图

var ipfs = require('ipfs-http-client');

function saveImageOnIpfs(reader) {
return new Promise((resolve, reject)=> {
let buffer = Buffer.from(reader.result);
ipfs.add(buffer).then(res=> {
console.log("res: ", res);
resolve(res[0].hash);
}).catch(err=> {
console.error(err);
reject(err);
});
});
}

function saveTextBlobOnIpfs(blob) {
return new Promise((resolve, reject)=> {
let buffer = Buffer.from(blob, 'utf-8');
ipfs.add(buffer).then(res=> {
console.log("res: ", res);
resolve(res[0].hash);
}).catch(err => {
console.error(err);
reject(err);
});
});
}

运行结果及报错内容

Uncaught (in promise) TypeError: ipfs.add is not a function
查了很久也没解决，不知道是不是写法太久了
let desc = '';
ipfs.cat(p[4]).then(file=> {
desc = file.toString();
$("#product-desc").append("

");
});
ipfs.cat也是一样的问题

pfs.add 没有这个方法

var ipfs = require("ipfs-http-client");

console.log(ipfs.create().add, "===");

var ipfs = require("ipfs-http-client");
function saveImageOnIpfs(reader) {
  return new Promise((resolve, reject) => {
    let buffer = Buffer.from(reader.result);
    ipfs.create().add
      .add(buffer)
      .then((res) => {
        console.log("res: ", res);
        resolve(res[0].hash);
      })
      .catch((err) => {
        console.error(err);
        reject(err);
      });
  });
}

function saveTextBlobOnIpfs(blob) {
  return new Promise((resolve, reject) => {
    let buffer = Buffer.from(blob, "utf-8");
    ipfs.create().add(buffer)
      .then((res) => {
        console.log("res: ", res);
        resolve(res[0].hash);
      })
      .catch((err) => {
        console.error(err);
        reject(err);
      });
  });
}

var ipfsClient = require('ipfs-http-client')
// 连接ipfsAPI服务器
var ipfs = ipfsClient({ host: 'localhost', port: '5001', protocol: 'http' })

import { create, urlSource } from 'ipfs-http-client'
const ipfs = create()

const file = await ipfs.add(urlSource('https://ipfs.io/images/ipfs-logo.svg'))
console.log(file)