Невозможно загрузить файл через провайдера пользовательских данных (пример загрузки файла) - PullRequest
Новая
       57

Невозможно загрузить файл через провайдера пользовательских данных (пример загрузки файла)

0 голосов
/ 24 февраля 2020

Я следовал этому примеру кода для загрузки файла, но он всегда возвращал сообщение об ошибке «Отправленные данные не были файлом. Проверьте тип кодировки в форме.»

https://marmelab.com/react-admin/DataProviders.html

Расширение поставщика данных (пример загрузки файла)

enter image description here

Я использую ra-data- провайдер drf & Django API REST Framework. https://github.com/synaptic-cl/ra-data-drf

И используйте ImageInput для загрузки файла.

Вот следующий код, который я использую: 

//in WorkRequest.js
<ImageInput source="attachment" label="Attachment" accept="image/*">
   <ImageField source="src" title="title" />
</ImageInput>

//in addUploadFeature.js
const convertFileToBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.rawFile);

    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
});

const addUploadFeature = requestHandler => (type, resource, params) => {
    if (type === 'CREATE' && resource === 'WorkRequest') {
        // notice that following condition can be true only when `<ImageInput source="pictures" />` component has parameter `multiple={true}`
        // if parameter `multiple` is false, then data.pictures is not an array, but single object
        if (params.data.attachment && params.data.attachment.length) {
            // only freshly dropped pictures are instance of File
            const formerPictures = params.data.attachment.filter(p => !(p.rawFile instanceof File));
            const newPictures = params.data.attachment.filter(p => p.rawFile instanceof File);

            return Promise.all(newPictures.map(convertFileToBase64))
                .then(base64Pictures => base64Pictures.map((picture64, index) => ({
                    src: picture64,
                    title: `${newPictures[index].title}`,
                })))
                .then(transformedNewPictures => requestHandler(type, resource, {
                    ...params,
                    data: {
                        ...params.data,
                        attachment: [...transformedNewPictures, ...formerPictures],
                    },
                }));
        }
    }
    // for other request types and resources, fall back to the default request handler
    return requestHandler(type, resource, params);
};

export default addUploadFeature;

// in dataProvider.js
import { fetchUtils } from 'react-admin';
import drfProvider from 'ra-data-drf';
import addUploadFeature from './addUploadFeature';

const token = localStorage.getItem('token');
const Token = 'Token ' + token
const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Authorization: Token });
    }
    return fetchUtils.fetchJson(url, options);
}

const dataProvider = drfProvider('http://localhost:8000', httpClient)
const uploadCapableDataProvider = addUploadFeature(dataProvider);

export default uploadCapableDataProvider;

Другая информация: Функция addUploadFeature имеет эту проблему, если console.log:

enter image description here

Environment 

React-admin version: "react-admin": "^2.9.6",
Last version that did not exhibit the issue (if applicable):
React version: "react": "^16.10.2",
Browser: https://marmelab.com/react-admin/DataProviders.html
Stack trace (in case of a JS error):

Кто может помочь мне решить эту проблему? Спасибо.

...