文件上传

一、上传到自己的服务器：

使用 AdminLTE 2 网站中的 form 表单的代码：https://adminlte.io/themes/AdminLTE/pages/forms/general.html （使用其原先css样式及HTML代码，代码内容经过精简）

前端代码：

首先：一个带有输入框跟上传按钮的HTML文件（样式图如下：）

<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
        <span class="input-group-btn">
            <input type="file" class="btn btn-default" id="thumbnail-btn" value="上传文件">
        </span>
    </div>
</div>

使用 input标签 ， type=file 时显示的样式；

将上图修改为下图的样式，使其更美观；

<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    <div class="input-group">
        <input type="text" class="form-control" id="thumbnail-form" name="thumbnail">
        <span class="input-group-btn">
            <label class="btn btn-default btn-file">
                上传图片<input  hidden type="file" class="btn btn-default" id="thumbnail-btn">
            </label>
        </span>
    </div>
</div>

id = "thumbnail-form"：输入框的ID；

id = "thumbnail-btn"：作为隐藏起来的 file标签 文件的一个按钮ID；

使用 label标签，其中 for 中的值等于 input 的ID：相当于点击“缩略图”时会默认点击下方输入框；点击“上传图片”会默认点击“type=file”的标签；二者之间存在关联；

使用 hidden 将 file标签 隐藏起来，使“上传图片”的字体将其覆盖；

使用js文件监听其上传时的点击事件；

function News() {

}

News.prototype.run = function () {
    var self = this;
    self.ListenUploadFileEvent();
};

// 监听文件上传的事件；
News.prototype.ListenUploadFileEvent = function () {
    var uploadBtn = $('#thumbnail-btn');
    uploadBtn.change(function () {
        var file = uploadBtn[0].files[0];
        var formData = new FormData();
        formData.append('file', file);
        xfzajax.post({
            'url': '/cms/upload_file/',
            'data': formData,
            'processData': false,
            'contentType': false,
            'success': function (result) {
                if (result['code'] === 200){
                    var url = result['data']['url'];
                    var thumbnailInput = $('#thumbnail-form');
                    thumbnailInput.val(url);
                }
            }
        })
    });
};

$(function () {
    var news = new News();
    news.run();
});

change：用来监听进入上传文件选定文件后点击打开按钮的事件，此处不能使用 click 点击事件；

因为 uploadBtn 得到的是一个集合，不是一个单一的对象。所以 var file = uploadBtn[0].files[0]; 中的 uploadBtn[0] 用来获取其中的唯一一个按钮，与其存储的所有文件中的第一个文件。

formData：用来存储文件；

 formData.append('file', file); ：引号中的字段名需与后台通过 ‘get’ 获取文件填写的字段名保持一致；

然后通过ajax请求发送给后端服务器，跳转的 url 及其数据 formData，后两个 false  为告知上层 jquery-3.3.1.min.js 文件不对该文件的数据再次进行处理或添加其它内容，以及成功或者失败的返回内容（失败内容定义在ajax文件中）；

在后端中得到的url完整路径，调用 ‘restful’ 中的 ‘result’ 函数，再将获取的 ‘url’ 的值给到前端输入框中显示。

ajax代码

//static:xfzajax.js
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

var xfzajax = {
    'get': function (args) {
        args['method'] = 'get';
        this.ajax(args);
    },
    'post': function (args) {
        args['method'] = 'post';
        this._ajaxSetup();
        this.ajax(args);
    },
    'ajax': function (args) {
        var success = args['success'];
        args['success'] = function (result) {
            if (result['code'] === 200) {
                if (success) {
                    success(result)
                }
            } else {
                var messageObject = result['message'];
                if (typeof messageObject == 'string' || messageObject.constructor === String) {
                    window.messageBox.showError(messageObject);
                } else {
                    // {"password":['密码最大长度不能超过20为！','xxx'],"telephone":['xx','x']}
                    for (var key in messageObject) {
                        var messages = messageObject[key];
                        var message = messages[0];
                        window.messageBox.showError(message);
                    }
                }
                if(success){
                    success(result)
                }
            }
        };
        args['fail'] = function (error) {
            console.log(error);
            window.showError('服务器内部错误！')
        };
        $.ajax(args);
    },
    '_ajaxSetup': function () {
        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
                }
            }
        });
    }
};

后端代码：

settings.py文件的设置：

# 在末尾添加内容；

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'front','dist'),
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

使用MEDIA_ROOT与MEDIA_URL，用来指定文件上传后存储的位置，在主目录中新建‘media’文件用来存储内容；

文件的映射路径，与前端 ajax 内容中跳转的 url 一致。

# 总的url链接；

from django.urls import path,include
from django.conf.urls.static import static
from django.conf import settings

urlpatterns = [
    path('cms/',include('apps.cms.urls')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)


# cms的url：

from django.urls import path
from . import views

app_name = 'cms'

urlpatterns = [
    path('upload_file/',views.upload_file,name='upload_file'),
]

视图函数

from django.views.decorators.http import require_POST, 
from utils import restful
from django.conf import settings
import os


# 文件上传；
@require_POST
def upload_file(request):
    file = request.FILES.get('file')
    name = file.name
    with open(os.path.join(settings.MEDIA_ROOT,name),'wb') as fp:
        for chunk in file.chunks():
            fp.write(chunk)
    url = request.build_absolute_uri(settings.MEDIA_URL + name)
    return restful.result(data={'url':url})

使用 “get” 获取的 “file” 与前端提到 “file” 一致；

使用 build_absolute_uri 可以获取完整的url地址；

restful.py文件（简化每个文件代码运行结果的代码量）

from django.http import JsonResponse

class HttpCode(object):
    ok = 200            # 正常运行；
    paramserror = 400   # 参数错误；
    unauth = 401        # 没授权；
    methoderror = 405   # 请求方法错误；
    servererror = 500   # 服务器内部错误；

def result(code=HttpCode.ok,message='',data=None,kwargs=None):
    json_dict = {'code':code,'message':message,'data':data}
    if kwargs and isinstance(kwargs,dict) and kwargs.keys():
        json_dict.update(kwargs)
    return JsonResponse(json_dict)

def ok():
    return result()

def params_error(message='',data=None):
    return result(code=HttpCode.paramserror,message=message,data=data)

def unauth(message='',data=None):
    return result(code=HttpCode.unauth,message=message,data=data)

def method_error(message='',data=None):
    return result(code=HttpCode.methoderror,message=message,data=data)

def server_error(message='',data=''):
    return result(code=HttpCode.servererror,message=message,data=data)

二、上传到七牛云

1、登录注册七牛云：https://www.qiniu.com//

2、登录后进入右上方管理控制台后，再点击右上角的个人图标进入密钥管理，记住 AK 与 SK ，后续用到；

3、点击左侧 对象存储，新建存储空间 bucket 。

后端：

1、下载 python SDK：pip install qiniu；

2、创建一个获取 token 的 url；

# 上传七牛云；
@require_GET
def qntokon(request):
    access_key = 'GjdN0XJxtrLbINSxx4ZjXXitk7Aux5h046x9viB8'
    secret_key = '8ULlOQezsKZIRFl_Bie09GZIJyonH50aJH6RONhu'
    bucket = 'qmspace'
    # 创建授权信息q；
    q = qiniu.Auth(access_key,secret_key)
    # 生成上传凭证，传给前端；
    tokon = q.upload_token(bucket)
    return restful.result(data={'tokon':tokon})

前端：

基于七牛 API 开发的前端 JavaScript SDK：https://github.com/qiniu/js-sdk（详细的官方文档讲解）

在HTML代码的缩略图代码下添加进度条代码，默认隐藏；

<!--html代码-->
<script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js
"></script>
--snip--
<div class="form-group">
    <label for="thumbnail-form">缩略图</label>
    --snip--
    </div>
</div>
<!--上传进度条-->
<div class="form-group" id="progress-group" style="display: none;">
    <div class="progress">
      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
           aria-valuemin="0" aria-valuemax="100" style=" 0">
          0%
      </div>
    </div>
</div>

通过 js 代码实现与七牛云的对接及文件的上传，以及进度条的显示情况；

// 上传到七牛云；
News.prototype.ListenQiniuuploadFileEvent = function(){
    var self = this;
    var uploadBtn = $('#thumbnail-btn');
    uploadBtn.change(function () {
        var file = this.files[0];
        xfzajax.get({
            'url': '/cms/qntokon/',
            'success': function (result) {
                if (result['code'] ===200 ){
                    
                    // token: 上传验证信息，前端通过接口请求后端获得；
                    var tokon = result['data']['tokon'];
                    
                    // key: 文件资源名(当前时间+文件格式);
                    var key = (new Date()).getTime() + '.' + file.name.split('.')[-1];
                    
                    var putExtra = {
                        fname: key,
                        params: {},
                        mimeType: ['image/png','image/jpeg','image/gif','video/x-ms-wmv','video/mp4','video/x-flv']
                    };
                    
                    var config = {
                        useCdnDomain: true,
                        retryCount: 6,
                        region: qiniu.region.z2
                    };
                    
                    // 文件上传；
                    var observable = qiniu.upload(file,key,tokon,putExtra,config);
                    observable.subscribe({
                        'next': self.handFileUploadProcess,
                        'error': self.handFileUploadError,
                        'complete': self.handFileUploadComplete,
                    })
                }
            }
        })
    })
};

News.prototype.handFileUploadProcess = function(response){
    var total = response.total;
    var percent = total.percent;
    var percentText = percent.toFixed() + '%';
    var progressGroup = News.progressGroup;
    progressGroup.show();
    var progressBar = $('.progress-bar');
    progressBar.css({"width":percentText});
    progressBar.text(percentText);
};

News.prototype.handFileUploadError = function(error){
    window.messageBox.showError(error.message);
    var progressGroup = News.progressGroup;
    progressGroup.hide();
    console.log(error.message);
};

News.prototype.handFileUploadComplete = function(response){
    console.log(response);
    var progressGroup = News.progressGroup;
    progressGroup.hide();
    var domain = 'http://ps96zui1h.bkt.clouddn.com/';
    var filename = response.key;
    var url = domain + filename;
    var thumbnailInput = $("input[name='thumbnail']");
    thumbnailInput.val(url)
};

$(function () {
    var news = new News();
    news.run();
    News.progressGroup = $('#progress-group');
});

（官方文档很详细，不再做个人注解）

上传成功：