0

从我所见，当我按下包含以下内容的表单提交时，所有操作都会发生：

<ImageInput multiple source="pictures" accept="image/*">
  <ImageField source="src" title="title" />
</ImageInput>

然后一些类似的代码正在运行：

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if ( (type === 'CREATE' || type === "UPDATE")) {
        if (params.data.pictures && params.data.pictures.length) {
            const pictures = params.data.pictures.filter(p => p.rawFile instanceof File)

            const url = config.uploadImageEndpoint;
            //the params contain the image as a fileInstance
            params.data.pictures = [];
            for (let picture of pictures) {
                let form = new FormData();
                form.append('file', picture.rawFile);
                let options = APIUtils.createOptionsForImageUpload(form);
                return fetchUtils.fetchJson(url, options)
                .then(res => {
                    params.data.pictures.push({id: res.json.content[0].id});
                    return requestHandler(type, resource, params)
                });
            }
        }
    }

    return requestHandler(type, resource, params);
};

然后运行 ​​restClient 代码以在创建或编辑时保存表单的资源。

我很好奇如何在这些文件保存在数据库中后获取 ids.. 然后提交表单并将这些 ids 连接到特定的 ImageInputs..

编辑：

使用上面的代码，我只得到一个带有我图片的第一个 id 的数组

谢谢！

4

3 回答 3

2

根据 kunal pareek 的回答，这是收集所有 id 的完整代码，然后您可以将它们绑定到父资源：

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if ( (type === 'CREATE' || type === "UPDATE")) {
        if (params.data.pictures && params.data.pictures.length) {
            const pictures = params.data.pictures.filter(p => p.rawFile instanceof File)

            const url = "some url";
            //the params contain the image as a fileInstance
            params.data.pictures = [];
            let promises = [];
            for (let picture of pictures) {
                let form = new FormData();
                form.append('file', picture.rawFile);
                let options = // create options without content type and body as form
                let promise = fetchUtils.fetchJson(url, options);
                promises.push(promise);
            }
            return Promise.all(promises).then(results => {
                for (let res of results) {
                    params.data.pictures.push(res.json.content[0].id);
                }
                return requestHandler(type, resource, params);
            });
        }
    }

    return requestHandler(type, resource, params);
};

这是我用于多个 dropzones 输入图片1、图片2 的版本，它不会在更新期间删除现有图像并再次传递这些 id 以绑定到资源..

const detectPicturesAndUpload = function(properties, params, requestHandler, type, resource) {
    let promises = [];
    for (let prop of properties) {
        if (params.data[prop] && params.data[prop].length) {
            const pictures = params.data[prop].filter(p => p.rawFile instanceof File);
            const alreadUploadedPics = params.data[prop].filter(p => !p.rawFile);
            const url = config.uploadImageEndpoint;
            //the params contain the image as a fileInstance
            params.data[prop] = [];

            for (let picture of pictures) {
                let form = new FormData();
                form.append('file', picture.rawFile);
                form.append('property', prop); // the endpoint needs to return the prop name
                let options = APIUtils.createOptionsForImageUpload(form);
                let promise = fetchUtils.fetchJson(url, options);
                promises.push(promise);
            }
            for (let uploadedPic of alreadUploadedPics) {
                if (!Array.isArray(params.data[prop])) {
                    params.data[prop] = [];
                }
                params.data[prop].push(parseInt(uploadedPic.id));
            }
        }
    }
    return Promise.all(promises).then(results => {
        for (let res of results) {
            let propName = res.json.content[0].property; // so it can be used here
            if (!Array.isArray(params.data[propName])) {
                params.data[propName] = [];
            }
            params.data[propName].push(parseInt(res.json.content[0].id));
        }
        return requestHandler(type, resource, params);
    });
}


const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if ( (type === 'CREATE' || type === "UPDATE")) {
        return detectPicturesAndUpload(["pictures1", "pictures2"], params, requestHandler, type, resource);
    }

    return requestHandler(type, resource, params);
};

export default addUploadCapabilities;
于 2017-09-28T08:04:23.650 回答
1

目前还没有明确的规范机制。AOR 期望我们仅通过 1 次调用在 API 端处理图像上传。我必须说，以上将是一个有用的功能。

实现此目的的一种可能方法是让上面的 addUploadCapabilities 方法也进行 fetch 调用并异步调用 requestHandler。在服务器响应后。然后我们可以修改请求参数并像以前一样继续。

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if ( (type === 'CREATE' || type === "UPDATE")) {
        if (params.data.pictures && params.data.pictures.length) {
            debugger;

const pictures = params.data.pictures.filter(p => p.rawFile instanceof File)
          let form = new FormData()
          const url = imageUploadURL
          const options = {}
          //the params contain the image as a fileInstance
          form.append('image', params.data.pictures[0].rawFile);         
          options.method = 'POST'
          options.body = form
          return fetchUtils.fetchJson(url, options)
          .then(res => {
               params.data.pictureId = res.json.id
               return requestHandler(type, resource, params)
              })

            );
        }
    }

    return requestHandler(type, resource, params);
};
于 2017-09-28T06:37:22.457 回答
1

另一种方法是使用自定义输入来处理上传。见管理员休息发送额外的参数休息电话

于 2017-09-28T06:51:52.327 回答