Question

我正在尝试显示来自模型实例的外键集的文件。该文件可以是视频，也可以是图片，并且由用户上传（类似于Instagram）。如何根据上传的文件类型将文件正确显示为<video>或<img>？

我目前在html中使用<video>或<img>标签来显示文件，并且它们都可以工作，但前提是文件的类型正确。如果文件是其他类型的文件，则错误的标签将在网站上显示一个黑框。

{% if result.resultfile_set.all %}
    {% for resultfile in result.resultfile_set.all %}
        <video controls>
            <source src="{{ resultfile.file.url }}">
        </video>
        <img src="{{ resultfile.file.url }}" />
        <p>Caption: {{ resultfile.caption }}</p>
    {% endfor %}
{% endif %}

预期结果是，如果用户上传的文件是视频文件，则将其显示为原样。或者如果文件是图像文件，则将其显示为图像。相反，我目前每次只能显示两种文件类型，其中一种显示正确，而另一种显示为黑框

Answer 1

我建议检查MIME类型（link。

假设您有一个名为Media的模型：

class Media(models.Model):
    media = models.BinaryField(...)

    def generate_html(self):
        if mime_type(self.media) == "image":
            return <img></img>
        elif mime_type(self.media) == "video":
            return <video></video>
        else: 
            raise Exception("media type not understood")

现在，您可以在模板中使用generate_html方法

Answer 2

您可以将媒体类型与url一起发送，并使用条件渲染来显示适当的媒体

{% if result.resultfile_set.all %}
    {% for resultfile in result.resultfile_set.all %}
        {% if resultfile.file.type == "video" %}
            <video controls> <source src="{{ resultfile.file.url }}"> </video>
        {% elif resultfile.file.type == "image"}
            <img src="{{ resultfile.file.url }}" />
        {% else %}
            <div> Unsupported Media Format </div>
        {% endif %}
        <p>Caption: {{ resultfile.caption }}</p>
    {% endfor %}
{% endif %}

您的result.resultfile_set.all看起来像

[{
    file: {
        type: "image",
        url: "example.com/foo.png"
    },
    caption : "foo"
}, 
{
    file: {
        type: "video",
        url: "example.com/bar.mp4"
    },
    caption : "bar"
}]

Answer 3

不用担心，如何在Django模板中显示视频或图像文件，我对此有答案

使用以下代码

{% for msg in post_user %}
{% if msg.p_image_path.url|slice:"-4:" == ".mp4" %} 

#use video tag 
{% else %} 

#use image tag
{% endif %}
{% endfor %}

Answer 4

我尝试了很多方法，最后最好的解决方案是：

型号：

from mimetypes import guess_type

class Post(models.Model):
    media = models.FileField()

    def media_type_html(self):
    """
    guess_type returns a tuple like (type, encoding) and we want to access
    the type of media file in first index of tuple
    """
    type_tuple = guess_type(self.media.url, strict=True)
    if (type_tuple[0]).__contains__("image"):
        return "image"
    elif (type_tuple[0]).__contains__("video"):
        return "video"

在模板中，您可以像这样访问类型：

 {% if post.media_type_html == "image" %}
    <img src="{{ post.media.url }}">
 {% elif post.media_type_html == "video" %}
    <video controls>
       <source src="{{ post.media.url }}">
    </video>
 {% endif %}

您如何根据上传的文件类型在Django模板中显示视频或图像文件？

4 个答案: