2

我是反应管理员的新手。我正在使用 react-admin 上传文件。我已按照教程中提到的步骤进行操作。

但是在我提交请求之后......我看到了如下的 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 图像有效负载而不是链接吗？

4

2 回答 2

2

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

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if (type === 'UPDATE' && resource === 'posts') {
于 2018-06-21T04:31:01.360 回答
0

创建您的自定义 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!');
    });
}};
于 2021-06-23T09:44:30.207 回答