【django】 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求

如果是后台上传文件:  setting配置:  STATIC_URL = '/static/'  STATICFILES_DIRS = [      os.path.join(BASE_DIR, 'static'),      os.path.join(BASE_DIR, "media"),  ]    # Django用户上传的都叫media文件  MEDIA_URL = "/media/"  # media配置,用户上传的文件都默认放在这个文件夹下  MEDIA_ROOT = os.path.join(BASE_DIR, "media")      model的配置:   img = models.FileField(upload_to="img/",verbose_name="图片")

接收任何文件的前端代码:  <!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>Title</title>  </head>  <body>  <form method="post" action="/upload/" enctype="multipart/form-data" target="ifm1">          <input type="file" name="file" id="file"/>          <input type="button" value="提交" onclick="upload()"/>  </form>  <br>  <br>  <br>  <br>  <div>显示图片      <img id="images">  </div>  <br>  <br>  <br>  <br>  <div>显示路径      <a href="" id="imagess">链接</a>  </div>      </div>  <br>  <br>  <br>  <br>  <div>      {#    href="/static/img/TC代码.txt" #}      <a id="up"> 下载文件</a>  </div>      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>    <script>      function upload() {          var formData = new FormData();          var file = document.getElementById('file').files[0];          formData.append("file", file);          $.ajax({              url: "upload/",              type: "post",              data: formData,              dataType: "json",              cache: false,     //上传文件无需缓存              processData: false,//用于对data参数进行序列化处理 这里必须false              contentType: false, //必须*/              success: function (data) {                  console.log("22", data);                  $("#images").attr("src", data.image)                  $("#imagess").attr("href", data.image)                }          });      }        $("#up").on("click", function () {          $.ajax({              url: "http://127.0.0.1:8000/down/",              type: "get",              data: {},              success: function (data) {                  var $a = $('<a></a>');                    $a.attr("href", "http://127.0.0.1:8000/down/");                  $("body").append($a);                  $a[0].click();                  $a.remove();              }            })        });  </script>  </body>  </html>

增加任何文件的后端接口代码:    from rest_framework.views import APIView  from django.shortcuts import render, redirect, HttpResponse  from dal import models  from django.http import JsonResponse      class ImageShow(APIView):        def post(self, request):          name = str(request.data.get("name"))          message = {}            img_url  = "/static/img/{}".format(name)            obj = models.Car.objects.filter(img_url=img_url).first()          if obj :                message['code'] = 200              message['message'] = img_url # 返还路径              return JsonResponse(message)

下载文件后端:  from django.utils.http import urlquote  from rest_framework.views import APIView  from django.shortcuts import render, redirect, HttpResponse  from dal import models  from django.http import JsonResponse, FileResponse, StreamingHttpResponse      class fileShow(APIView):        def get(self, request):          message = {}          file = open('media/img/TC代码.txt','rb')   # 字符串替换成文件           print("file",file.name)          # file_names = file.name.split('/')[-1]          # print("file_names",file_names)            response = FileResponse(file)          response['Content-Type'] = 'application/octet-stream'            response['Content-Disposition'] = "attachment;filename={}".format(urlquote("TC代码.txt")) # 字符串替换成下载文件          print(response)          return response