reactjs - How do i set Uploadcare's multiple upload field to give a array of URLs instead of a URL that references a group of images?

Question

When multiple = true, Uploadcare gives an URL of group of images as value. Is there any way that i can set to get a array of images URLs as value?

Answer 1

没有开箱即用的选项，但您可以使用上传器的 JS API获取文件 URL 数组：

// get a widget reference
const widget = uploadcare.Widget("[role=uploadcare-uploader]");

// listen to the "change" event
widget.onChange(async (group) => {
  const files = await Promise.all(group.files());
  const urls = files.map(file => file.cdnUrl);
  console.log(urls);
});

如果您使用react-widget ，这里是如何实现相同的：

import React from "react";
import ReactDom from "react-dom";
import { Widget } from "@uploadcare/react-widget";

import "./styles.css";

const Example = () => {
  return (
    <div>
      <Widget
        publicKey="demopublickey"
        multiple
        onFileSelect={async (group) => {
          const files = await Promise.all(group.files());
          const urls = files.map((file) => file.cdnUrl);
          console.log(urls);
        }}
      />
    </div>
  );
};
ReactDom.render(<Example />, document.querySelector("#app"));

现场演示

此外，您可以使用/nth/ URL 指令访问组中的各个文件。在这种情况下，您不必知道文件的“真实”UUID。