黄兵的个人博客

Flask文件上传

最近需要上传用户头像，使用的是jqyer.ajax，在使用的时候中间有一些问题，具体可以参考这里：contentType = false相关问题思考

<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
    <p> 请上传小于3M的文件。 </p>
    <form action="{{ url_for('manage.upload_file') }}" role="form"
          enctype=multipart/form-data method="post">
        <div class="form-group">
            <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="fileinput-new thumbnail"
                     style="width: 200px; height: 150px;">
                    <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image"
                         alt=""/>
                </div>
                <div class="fileinput-preview fileinput-exists thumbnail"
                     style="max-width: 200px; max-height: 150px;"></div>
                <div>
                    <span class="btn default btn-file">
                        <span class="fileinput-new"> 选择图片 </span>
                        <span class="fileinput-exists"> Change </span>
                        <input type="file" name="file" id="ingredient_file">
                    </span>
                    <a href="javascript:;" class="btn default fileinput-exists"
                       data-dismiss="fileinput"> Remove </a>
                </div>
            </div>
            <div class="clearfix margin-top-10">
                <span class="label label-danger">NOTE! </span>
                <span>Attached image thumbnail is supported in Latest Firefox, Chrome, Opera, Safari and Internet Explorer 10 only </span>
            </div>
        </div>
        <div class="margin-top-10">
            <button class="btn green" type="submit" id="upload_file">Submit</button>
            <a href="javascript:;" class="btn default"> Cancel </a>
        </div>
    </form>
</div>
<!-- END CHANGE AVATAR TAB -->

jquery.ajax代码：

$(function () {

    $('#upload_file').click(function (event) {
        event.preventDefault();
        upload_file();
    });

    // Inject our CSRF token into our AJAX request.
    var csrftoken = $('meta[name=csrf-token]').attr('content')

    $.ajaxSetup({
        beforeSend: function (xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken)
            }
        }
    })
})

function upload_file() {
    var formData = new FormData();
    formData.append("file", $('#ingredient_file')[0].files[0])
    // add assoc key values, this will be posts values
    $.ajax({
        type: $('#tab_1_2 form').attr("method"),
        url: $('#tab_1_2 form').attr("action"),
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
            console.log(data);
        }
    })
}

后台使用的是flask，具体代码：

@manage.route('/upload_file', methods=['GET', 'POST'])
@login_required
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file.save(os.path.join(current_app.config['UPLOAD_FOLDER'], filename))
            old_path = os.path.join(current_app.config['UPLOAD_FOLDER'], filename)
            new_filename = str(uuid.uuid4()) + '.' + filename.rsplit('.', 1)[1]
            new_path = os.path.join(current_app.config['UPLOAD_FOLDER'], new_filename)
            # rename file
            os.rename(old_path, new_path)
            # save as file name to database
            current_user.profile_picture = new_filename
            db.session.add(current_user._get_current_object())
            db.session.commit()
            return '0'
    return '1'

上传完文件之后重命名（命名方式使用的是UUID），将文件名存入数据库。

上传的时候出现了路径不对，修改了路径问题解决。

文件所在路径（注意：红框是上传文件夹）：

上传路径和允许文件扩展名：

    # file upload path and file upload extensions
    UPLOAD_FOLDER = os.environ.get('UPLOAD_FOLDER', 'app/static/uploads')
    ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

判断文件是否允许上传：

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1] in Config.ALLOWED_EXTENSIONS

还可以使用flask-uploads模块上传，我这里没有使用。

参考资料：

Flask-Uploads文件上传的简单使用

Python使用UUID库生成唯一ID
学习python之 os.rename VS os.names

记录一个Flask文件上传的小坑

黄兵个人博客原创。

转载请注明出处：黄兵个人博客 - Flask文件上传