使用 react-admin 上传图片答案

【问题标题】：Image upload using react-admin使用 react-admin 上传图片
【发布时间】：2018-11-29 02:35:23
【问题描述】：

我是 react-admin 的新手。我正在使用 react-admin 上传文件。我已经按照下面提到的步骤in tutorial。

但是在我提交请求后...我看到 http 跟踪如下。我看到 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 图像负载而不是链接吗？

【问题讨论】：

标签： react-admin

【解决方案1】：

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

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

【讨论】：

是的，正如@MaxAlex 所说，这可能是路线问题。您没有注意到文档中的示例代码仅对“更新”类型的“帖子”资源启用。只需根据您的实际设置更改条件即可。

【解决方案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!');
    });
}};

【讨论】：