django上传文件夹_Django配置用户上传文件夹和暴露后端文件夹资源,实时更新头像

django上传文件夹_Django配置用户上传文件夹和暴露后端文件夹资源

网站所用的静态文件我们都默认存放到static文件夹下，而用户上传的文件也是静态资源，我们需要找一个公共的地方专门存储用户上传的静态文件。

针对用户上传的不同文件，保存到指定的文件夹下。

media配置专门用来指定用户上传的静态文件存放路径

1、配置文件中书写以下代码

# settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 用户上传的文件就会保存到该文件夹下

# media是文件夹的名字，可以自定义，一般使用media作为名字

当用户上传文件，会自动创建media目录，并且你模型表中指定的上传路径，会自动在media目录下创建相应的上传目录。

例如models类中，avatar字段：

avatar = models.FileField(upload_to='avatar', default='avatar/default.png')

该模型表中指定上传至avatar目录，因此会在media目录下再创建一个avatar目录，用于存放用户的头像

2、还需要将后端文件夹资源暴露给用户，这样用户才能访问到。

先去urls.py中导入模块：

from django.views.static import serve

from bbs import settings

在urls.py中多写一条url，固定的写法：

url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),

实时更新头像

html：
                <div class="form-group" >
                  新头像:
                    <p><label for="avatar">
                        <img src="{% static 'image/default.jpg' %}"(默认的图片） alt="" width="120" id="img">
                    </label></p>
                    <input type="file" name="avatar" id="avatar" style="display: none">
                </div>

jQuery：
    $('#avatar').change(function () {
        // 1.产生一个文件阅读器对象
        let myFileReader = new FileReader();
        // 2.获取用户上传的头像文件
        let avatarObj = this.files[0];
        // 3.将文件对象交给阅读器加载
        myFileReader.readAsDataURL(avatarObj)  // IO操作 需要消耗时间 但是是异步
        // 4.修改img标签的src属性
        // 等待文件阅读器对象加载完毕之后再修改src属性
        myFileReader.onload = function(){
            $('#img').attr('src',myFileReader.result)
        }
    })