1. 程式人生 > 其它 >解決Django3使用editormd上傳圖片後前端頁面未顯示後端傳回的URL

解決Django3使用editormd上傳圖片後前端頁面未顯示後端傳回的URL

導致這種情況的原因可能有:
一、editormd是使用POST方法提交的資料,需要對views.py中處理圖片上傳的函式使用@csrf_exempt解除CSRF驗證(注意看控制檯的輸出,如果未解除驗證會報錯)。當然也可以修改editormd的原始碼在前端新增csrf驗證。

二、使用@xframe_options_sameorigin解決iframe拒絕問題(在網上看到的配置editormd的教程裡大多沒提到這點)。如果是這個原因導致的,在chrome瀏覽器中的右鍵–>檢查在console中會顯示Refused to display 'http://127.0.0.1:8000/ in a frame because it set 'X-Frame-Option‘之類的錯誤。此時只需要在views.py中對應的處理函式前加上@xframe_options_sameorigin裝飾器即可。至於原因已經有前人詳細的講解過了,下面是參考連結:

Django 報錯 Refused to display 'http://127.0.0.1:8000/ in a frame because it set 'X-Frame-Option
django3 Refused to display ‘url‘ in a frame because it set ‘X-Frame-Options‘ to ‘deny‘
django解決frame拒絕問題
Django的X-Frame-Options設定
三、注意從request中取值的方式,使用request.FILES[‘editormd-image-file’]或者是request.FILES.get(‘editormd-image-file’,None)。注意返回值的格式,成功就返回{‘success’:1,‘message’:’’,url:’’}失敗就返回{‘success’:0,‘message’:’’}

# 下面給出大概的參考程式碼
from django.views.decorators.clickjacking import xframe_options_sameorigin
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
@xframe_options_sameorigin
def upload_image(request):
	if requst.method=='POST':
		data = {'success': 0, 'message': '圖片上傳失敗'}
		image = request.FILES.get('editormd-image-file', None)
		if image:
			# 這裡做圖片儲存的工作
			image_url = ''  # 連線到圖片位置的url
			data = {'success': 1, 'message': '圖片上傳成功', 'url': image_url}
		return JsonResponse(data, content_type="text/html")

https://blog.csdn.net/qq_44614170/article/details/107383283