Question

我使用邮递员为我创建的API保存了一张图片。保存图像的方式是：

{
    "esversion": 6,
    "browser": true,
    "strict": "global"
}

我的猫鼬模式如下：

const newProduct = new Product({
    name: req.body.name,
    referenceId: createReferenceId(),
    category: req.body.category,
    image: {
      data: fs.readFileSync(req.body.image),
      contentType: "image/jpg"
    },
    metadata: req.body.metadata
  });
  newProduct
    .save()
    .then(product => res.json(product))
    .catch(err => res.json(err));

我存储的数据如下：

const ProductSchema = new Schema({
 name: { type: String, required: true },
  referenceId: { type: String, required: true },
  category: { type: String, required: true },
  image: { contentType: String, data: Buffer },
  metadata: { type: String }
});

我想在reactJS中显示此保存的图像吗？我很困惑该怎么办。请帮忙。

Answer 1

您可以将图像另存为dataURL。以下是我创建的承诺，目的是从Dropzone组件中提取图像数据。

const promise = new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.readAsDataURL(filesToUpload[0]);
    reader.onload = () => {
      if (reader.result) {
        resolve(reader.result);
      } else {
        reject(Error('Failed converting to base64'));
      }
    };
});

然后您可以使用Promise中的then()方法访问数据。

promise.then((result) => {
  // This is the result
  console.log(result);
}, (err) => {
  console.log(err);
});

检索到dataURL后，将其发布到您的API中。然后，您可以轻松使用src中的<img>属性来显示图像。

希望这会有所帮助。干杯！

Answer 2

将数组缓冲区转换为base64，并在html部分中使用该变量。

let arrayBuffer = "Your data from api";

var base64Val = window.btoa(
                 new Uint8Array(arrayBuffer).reduce((data, byte) => 
                    data + String.fromCharCode(byte), ''
                 )
             );

<img src={`data:image/jpeg;base64,${base64Val}`} />

无法显示图像React.js

2 个答案: