如何使用 REST API(React) 从 SharePoint 列表将图像上传到图像列

问题描述

我在通过 pnpjs 在线上传图片到 sharepoint 中的图片列时遇到问题 我不知道如何转换图像并上传到共享点列表中的图像列。 我尝试了很多方法（通过将图像转换为 blob、文件数据）没有任何效果。

保留很多这不是列表的附件.. 这是共享点列表中的一个新列（图像） reference image click here

解决方法

看起来图像没有存储在列表中。存储 JSON。因此，您可以将图像上传到站点资产（这是手动设置图像时 sharepoint 所做的），然后将 json 放入该字段。我会尝试这样的事情（假设您使用的是 pnpjs）

import * as React from "react";
import { sp } from "@pnp/sp/presets/all";

// hello world react component
export const HelloWorld = () => {

  const uploadFile = async (evt) => {

    const file: File = evt.target.files[0];

    // upload to the root folder of site assets in this demo
    const assets = await sp.web.lists.ensureSiteAssetsLibrary();
    const fileItem = await assets.rootFolder.files.add(file.name,file,true);

    // bare minimum; probably you'll want other properties as well
    const img = {
      "serverRelativeUrl": fileItem.data.ServerRelativeUrl,};

    // create the item,stringify json for image column
    await sp.web.lists.getByTitle("YourListWithImageColumn").items.add({
      Title: "Hello",YourImageColumn: JSON.stringify(img)
    });
  };

  return (<div>
    <input type='file' onChange={uploadFile} />
  </div>);
};

,

@azarmfa，

图像文件实际上并没有存储在图像字段中。该字段仅引用其位置。您可以先将图像文件上传到库（默认情况下它将是站点资产），然后像下面这样更新项目：

  let list = sp.web.lists.getByTitle("mylinks");

  let json = {
    "fileName": "Search_Arrow.jpg","serverUrl": "https://abc.sharepoint.com","serverRelativeUrl": "/sites/s01/Style%20Library/Images/Search_Arrow.jpg"
  };

  let jsonstr = JSON.stringify(json);

  const i = await list.items.getById(3).update({
    Title: "My New Tit",img: jsonstr
  });

BR