使用react-admin上传图像

Question

我是第一次使用react-admin。我正在使用react-admin上传文件。我已经遵循了下面提到的步骤in tutorial。

但是在我提交请求之后……我看到http trace如下。我看到的是blob链接，而不是Base64图像有效负载。

{
    "pictures": {
        "rawFile": {
            "preview": "blob:http://127.0.0.1:3000/fedcd180-cdc4-44df-b8c9-5c7196788dc6"
        },
        "src": "blob:http://127.0.0.1:3000/fedcd180-cdc4-44df-b8c9-5c7196788dc6",
        "title": "Android_robot.png"
    }
}

有人可以建议如何获得base64图像有效负载，而不是链接？

Answer 1

检查您是否有此处理程序，很可能您没有将资源posts的名称更改为：

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if (type === 'UPDATE' && resource === 'posts') { 

Answer 2

创建自定义dataProvider以将图片转换为base64

import restServerProvider from 'ra-data-json-server';
const servicesHost = 'http://localhost:8080/api';

const dataProvider = restServerProvider(servicesHost);

const myDataProfider = {
    ...dataProvider,
    create: (resource, params) => {        
        if (resource !== 'your-route' || !params.data.pictures) {
            // fallback to the default implementation
            return dataProvider.create(resource, params);
        }            
       
        const myFile = params.data.pictures;
          if ( !myFile.rawFile instanceof File ){
              return Promise.reject('Error: Not a file...'); // Didn't test this...
          }

          return Promise.resolve( convertFileToBase64(myFile) )
              .then( (picture64) => ({
                  src: picture64,
                  title: `${myFile.title}`
              }))
              .then( transformedMyFile => dataProvider.create(resource, {
                  ...params,
                  data: {
                      ...params.data,
                      myFile: transformedMyFile
                  }
              }));
    }
};
const convertFileToBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.rawFile);
  
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
  });

export default myDataProfider;

并在您的服务器API上获取图像数据

exports.create = (req, res) => {  
    if(req.body.myFile){
    var file = req.body.myFile;
    var fs = require('fs');
    var data = file.src.replace(/^data:image\/\w+;base64,/, "");
    var buf = Buffer.from(data, 'base64');
    fs.writeFile(`upload/${file.title}`, buf, err => {
      if (err) throw err;
      console.log('Saved!');
    });
}};