Django Rest Framework 使用summernote上传图片(二)

之前的随笔写过，使用summernote上传图片到本地服务器，但是这样其实不符合实际需求，我们起码会把图片上传到本地的其他服务器。

先说一下公司需求，为了给测试组写一个工作台，所以要有一个提BUG的界面，选择了summernote的富文本框，因为这是内部的系统，所以没有把图片放到公网服务器上，

而是把图片放到了公司的SFTP服务器上。已经实现，记录一下。

首先要修改模型类的属性，pathname = models.CharField(verbose_name=u'路径', max_length=100)，之前用的时file字段，但是我们其实保存的只是一个路径。

之后去网上搜索Django SFTP服务器，集成到项目中，用以连接SFTP服务器和上传，下载图片。

视图大概是这样：

class SaveFile(viewsets.ModelViewSet):
　　
# 上传图片

def create(self, request, *args, **kwargs):
    ftp = SSH(host, port, user, password)
    self.serializer_class = TestFileSerializer
    image_num = request.GET.get('num')# 这里其实是为了获取多张图片，这个和你在js里面的设置有关
    file = request.FILES['ajaxTaskFile' + str(image_num)]
    current = "" # 时间戳
    dir_name = "" # 目录
    seed = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-"
    rand_str_list = []
    for i in range(8):
        rand_str_list.append(random.choice(seed))
    rand_str = ''.join(rand_str_list)# 产生随机文件后缀，原因后面解释
    file_name = 'test' + current + rand_str + '.jpg'
    with open(file_name, 'wb+') as temp_file:
        for chunk in file.chunks():
            temp_file.write(chunk)
    ftp.upload(file_name, 图片路径)
    os.remove(file_name)
    data = {
        "objectType": 'bug',
        "pathname": "url?file_name=" + file_name,# 传递这个参数是为了让图片回显
        "addedBy":,
        "title": '测试图片',
        "extension": file.name[-3:]
    }
    serial = TestFileSerializer(data=data)
    if not serial.is_valid():
        return Response(serial.data, status=status.HTTP_400_BAD_REQUEST)
    serial.save()
    return Response(serial.data)
# 下载图片

def list(self, request, *args, **kwargs):
    ftp = SSH(host, port, user, password)
    down_file_name = request.GET.get('file_name')# 获取下载文件
    self.serializer_class = TestFileSerializer
    current = ""
    dir_name = ""
    rand_num = random.randint(10, 99)# 生成随机数，防止图片名重复
    file_name = 'test' + current + str(rand_num) + '.jpg'
    ftp.download(file_name, 文件路径)
    image_data = open(file_name, "rb").read()
    os.remove(file_name)
    return HttpResponse(image_data, content_type="image/png")
最后记得HttpResponse 返回图片数据即可
附上我的js中的sendfile：

function sendFile(files) {
    var files_length = files.length;
    var data = new FormData();
    for (var i = 0; i < files_length; i++) {
        data.append("ajaxTaskFile" + [i], files[i]);

        $.ajax({
            data: data,
            type: "POST",
            url: $context1 + "test_save_file?num=" + i,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                $('#editor').summernote('insertImage', data.pathname);# data,pathname这个参数其实就是summernote的回显函数，get请求。
            },
            error: function () {
                alert("上传失败");
            }
        });
    }
}
前面说到的随机文件后缀，其实是给与了图片一个唯一性，因为在提交bug界面，你的bug是没提交的，所以你没法获取bug的id进行关联。而且你需要用户上传或者关联之后，回显图片，所以你也不能在提交bug之后再保存图片。
上面的方案是上传到服务器之后，数据库中保留的字段就是图片的路径，再把需要下载的图片名传递给我们视图中的get请求，回显之后，保存，bug数据表中，summernote字段保存的是一个img标签和路径，基本满足需求。