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

@api_view(('POST',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def upload_list(request):
    # 如果項目根目錄沒有upload文件夾，會自動給你創(chuàng)建一個
    folder_path = settings.MEDIA_ROOT
    if not os.path.exists(folder_path):
        os.makedirs(folder_path)
    files = request.FILES.getlist('file')
    for file in files:
        # 這三行代碼就是上傳文件的代碼
        f = open(settings.MEDIA_ROOT + "/" + file.name, mode='wb')
        for chunk in file.chunks():
            f.write(chunk)
        # 這段代碼是我要網(wǎng)數(shù)據(jù)庫里存的一些文件信息，如果不存庫的話不用寫
        size = file.size
        suffix = file.content_type
        createUser = request.user
        filePath = settings.MEDIA_URL + file.name
        name = file.name
        # 上傳完文件記得要關(guān)閉
        # 需要注意的一點，如果f.close()這句代碼之前，上傳文件之后有報錯，那你文件是一直被占用的狀態(tài)，刪除也刪不掉，所以一定要做好代碼順序
        f.close()
        # 往數(shù)據(jù)庫里存文件信息
        Filemanage.objects.create(size=size, suffix=suffix, create_user=createUser, file_path=filePath, name=name)
    return JsonResponse(OrderedDict([
        ('results', {})
    ], code=status.HTTP_200_OK))

<el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :auto-upload="false"
          :http-request="upload"
          :before-upload="beforeAvatarUpload"
          multiple
        >
          <el-button size="small" type="primary">點擊上傳</el-button>
        </el-upload>

methods: {
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 200;
        if (!isLt2M) {
            this.$message.error('上傳頭像圖片大小不能超過2MB!');
        }
        return isLt2M;
    },
    upload(param) {
        const formData = new FormData()
        formData.append('file', param.file)
        mail.uploadFile(formData).then(response => {
            console.log('上傳圖片成功')
            this.$refs.upload.clearFiles()
        }).catch(response => {
            console.log(response)
            this.$refs.upload.clearFiles()
        });
    },
}

def download(request, nid):
    # 通過前臺傳來的id查出文件名
    row_object = Filemanage.objects.filter(id=nid).first()
    # 文件的相對路徑
    file_path = '/upload/' + row_object.name
    # 打開文件
    with open(settings.MEDIA_ROOT + "/" + row_object.name, 'rb') as f:
        response = HttpResponse(f.read())
    # 設(shè)置Content-Disposition頭以強制瀏覽器下載文件
    file_name = os.path.basename(file_path)
    response["Content-Type"] = "application/octet-stream"
    response['Content-Disposition'] = f'attachment; filename="{file_name}"'
    return response

<el-button
  v-if="permissionList.del"
  size="small"
  type="success "
  @click="download(row)"
>{{ "下載" }}</el-button>

methods: {
    download(row) {
	    this.loading = true;
        // 這塊是我封裝的axios請求，請求時要帶著responseType: 'blob'，我會在下面放上我的代碼
	    file.requestDownload(row.id).then((response) => {
	      const url = window.URL.createObjectURL(new Blob([response.data]));
	      const link = document.createElement('a');
	      link.href = url;
	      link.setAttribute('download', row.name);
	      document.body.appendChild(link);
	      link.click();
	    })
	    .catch((e) => {
	      console.log(e)
	    });
    },
}

requestDownload(id) {
    return request({
      url: '/tool/download/' + id + '/',
      method: 'get',
      responseType: 'blob'
    })
}