The Django Rest Framework uses summernote to upload images

Summernote:

Links: https://summernote.org/deep-dive/

Based on the bootstrap lightweight rich text box, support directly paste the picture, the development document is also relatively full.

Please check the basic use for yourself.

Js:

$ (' #editor '). Summernote ({
        HEIGHT:250,
        width:1000,
        Callbacks: {
           Onimageupload:function (Files, editor, $editable) {
                    SendFile (files);
                }
        }

});

 function SendFile (Files, editor, $editable) {
 var size = files[0].size; 
 Console.log (Files[0]);            
 if ((size/1024/1024) > 2) {
 Alert ("image size cannot exceed 2M ..."); 
 return false;        
} 
 Var data= new FormData (); 
 Data.append ("Ajaxtaskfile", Files[0]); 
 $.ajax ({
 Data:data, 
 Type: "POST", 
 URL: "", 
 CAC  He:false, 
 Contenttype:false, 
 Processdata:false, 
 success:function (data) {
 $ (' #summernote '). Summernote (' Insertimage ', data.data);            
}, 
 Error:function () {
 Alert ("Upload failed"); 
 } 
}); 
} 
 overrides the built-in upload image function. 
 Models: 

Class Testfile (models. Model):
    ObjectID = models. ForeignKey (Testbug, On_delete=models. CASCADE, Blank=true, Null=true)
    ObjectType = models. Charfield (Verbose_name=u ' object type ', Max_length=20, Blank=false, default= ' bug ')
    Pathname = models. Filefield (verbose_name=u ' path ',  upload_to= ' front_static/assets/image ')
Addedby = models. Charfield (verbose_name=u ' creator ', max_length=20, Blank=false, default= ')

 title = models. Charfield (verbose_name=u ' picture title ', max_length=40, Blank=false)
 Extension = models. Charfield (verbose_name=u ' suffix ', max_length=20, Blank=false)

 Class Meta:
 db_table = ' T_test_file '

Serializer:

 class Testfileserializer (serializers. Modelserializer): 
 Bug_name = reverserelated (source= ' Objectid.title ', Many=false, read_only=true) 
 
 Class M ETA: 
 model = testfile 
 Fields = (' id ', ' objectID ', ' objectType ', ' pathname ', ' title ', ' extension ', ' B Ug_name ', ' Addedby ') 
 
 Views: 

Class SaveFile (Viewsets. Modelviewset):
    Authentication_classes = (csrfexemptsessionauthentication, basicauthentication)
    Queryset = TestFile.objects.all ()
    Serializer_class = Testfileserializer

    def create (self, request, *args, **kwargs):
        Self.serializer_class = Testfileserializer
        Cn_name = Request. cookies[' Cn_name ']
        data = {
            "ObjectType": ' Bug ',
            "Pathname": request.data[' Ajaxtaskfile '),
            "Addedby": Urlunquote (Cn_name),
            "title": ' SHHS ',
            "extension": ' jpg '
        }
        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)
This result is only the development environment, the picture will be saved to the local server, after the storage is roughly like this

If you need to access the API locally, refer to the configuration

Static_url = '/front_static/'

Staticfiles_dirs = (
    Os.path.join (Base_dir, "front_static"),
)

Urlpatterns = [
] + static (settings. Static_url, document_root= ' front_static/')

Subsequent uploads are uploaded to the FTP server. Create different directories for different users depending on the project to save.

The Django Rest Framework uses summernote to upload images