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

【问题标题】：How to upload image to image column from SharePoint List using REST API(React)如何使用 REST API(React) 从 SharePoint 列表将图像上传到图像列
【发布时间】：2021-05-16 04:07:43
【问题描述】：

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

请注意，这不是列表的附件。这是共享点列表中的新列（图像） reference image click here

【问题讨论】：

标签： reactjs sharepoint sharepoint-online spfx pnp-js

【解决方案1】：

看起来图像未存储在列表中。存储 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>);
};

【讨论】：

【解决方案2】：

@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
  });

【讨论】：