1

在 model.py 文件的 imageField 中默认使用图像。

from django.db import models
class Product(models.Model):
  item_title= models.CharField(max_length=50)
  item_desc=models.TextField()
  item_price=models.IntegerField()
  item_image=models.ImageField(upload_to='post_images',default='default.png')

这是我的序列化程序类

from rest_framework import serializers
from .models import Product
class ProductSerializer(serializers.ModelSerializer):
  class Meta:
    model = Product
    fields= ('item_title', 'item_desc', 'item_price', 'item_image')

views.py 是-

class ProductView(viewsets.ModelViewSet):
  serializer_class = ProductSerializer
  queryset = Product.objects.all()

在 localhost:8000 收到的 json 数据是 localhost:8000/api/products

在 App.js 的前端（react js）获取数据。这是代码

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productList: [],
    };
  }

  refreshList = () => {
    axios
     .get("/api/protducts/")
     .then((res) => this.setState({ productList: res.data }))
     .catch((err) => console.log(err));
  };
  componentWillMount() {
    this.refreshList();
  }

  render() {
    return (
      <div>
        {this.state.productList.map((item) => (
          <Product key={item.id} item={item} />
        ))}
      </div>
    );
  }
 }
 export default App;

前端的产品组件是

class Product extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  return (
    <div class="jumbotron col-sm-2">
      <img src={this.props.item.item_image}></img>
      <mark>{this.props.item.item_title}</mark>
      <div class="lead">{this.props.item.item_desc}</div>
      <div class="text-primary">{this.props.item.item_price}</div>
    </div>
  );}}
  export default Product;

前端显示的数据不显示任何图像。 本地主机：3000

4

1 回答 1

0

您不能使用 JSON 传递图像。您需要将其转换为 base64 或任何编码。让我给你解释一个简单的方法：

  1. 在模型中创建一个名为item_image_url.
class Product(models.Model):
  item_title= models.CharField(max_length=50)
  item_desc=models.TextField()
  item_price=models.IntegerField()
  item_image=models.ImageField(upload_to='post_images',default='default.png')
  item_image_url = models.TextField()
  1. 覆盖Product类中的默认保存方法，并将您的图像在线托管到任何图像托管网站，如 imgbb 或 aws。下面给出了一个示例代码。
def save(self):
        encodedString = base64.b64encode(self.item_image.file.read())
        data = {"key": os.environ.get("IMG_BB"), "image": encodedString.decode("utf-8")}
        uploadedImageInfo = requests.post("https://api.imgbb.com/1/upload", data=data)
        jsonResponse = json.loads(uploadedImageInfo.text)
        self.item_image_url = jsonResponse["data"]["display_url"]
        super().save()
  1. 现在，在您的序列化程序类中，添加id用于在 react 中正确呈现的字段和一个item_image_url包含在 imgbb 上托管的图像的 URL 的另一个字段。
class ProductSerializer(serializers.ModelSerializer):
  class Meta:
    model = Product
    fields= ('id', 'item_title', 'item_desc', 'item_price', 'item_image_url')

希望这可以帮助。如果您需要任何进一步的说明，请告诉我。

于 2020-08-25T09:46:09.460 回答