iT邦幫忙

0

同步與非同步上傳問題

我有一個表單裡面有一些值還有圖片要上傳到同一個table,但是我圖片上傳的方式是非同步(因為牽扯到一些排列等等的功能,所以用非同步),而值是同步上傳,請問該如何結合這兩種方式呢?
圖片上傳https://ithelp.ithome.com.tw/questions/10195146

看更多先前的討論...收起先前的討論...
谷哥 iT邦新手 5 級 ‧ 2019-10-14 21:40:04 檢舉
先圖片再值,或是先值再圖片
Luis-Chen iT邦新手 4 級 ‧ 2019-10-14 22:50:25 檢舉
看圖片能不能欠缺,如果可以的話可以先傳資料,圖片可以為空,後面在update時補就好,主要是圖片上傳上去的空間問題
ccutmis iT邦高手 9 級 ‧ 2019-10-15 10:08:50 檢舉
我有去回"圖片上傳"那篇了 假如這篇一個月後還沒解我再來回... XD
froce iT邦大師 4 級 ‧ 2019-10-15 11:53:39 檢舉
丟個index給資料庫,叫資料庫幫你決定順序...
淺水員 iT邦新手 2 級 ‧ 2019-10-15 14:26:36 檢舉
剛剛看前一篇的程式碼,驚訝的發現後端儲存圖片的路徑竟然是由前端指定的...
0
小魚
iT邦大師 1 級 ‧ 2019-10-14 22:04:50

UPDATE誰先有差嗎?

ccutmis iT邦高手 9 級 ‧ 2019-10-15 10:20:40 檢舉

有差喔~~在搶張學友門票的時候有差...

1
浩瀚星空
iT邦大師 1 級 ‧ 2019-10-15 01:31:26

我是搞不清楚你的邏輯。
我只問你一件事。

一但發送後,要等圖片上傳完才算完成這一次發送??還是不需要等圖片上傳完成就算完成發送了?
這你得先回答我。

如果是需要等上傳完才算完成發送。那誰些誰後有差嗎??對資料表來說,還不是得要同時建立這些資料?
如果是先建立資料後,再去更新圖片!!!
這種自找麻煩的方式你想要怎麼處理啊??光新生成的新id值你要如何去對應圖片??就是一個很大的問題不是嘛??怎麼會有非同步的情況發生呢?

cheer0101 iT邦新手 5 級 ‧ 2019-10-15 08:53:21 檢舉

星大你好,因為我圖片按下submit的時候,還要先去記錄當下圖片的位置,不是一按下submit就發送出去,PHP還要先處理圖片的尺寸等等,所以當初是用ajax寫這一塊,現在不直到要怎麼和其他資料做結合上傳 謝謝

小魚 iT邦大師 1 級 ‧ 2019-10-15 10:33:25 檢舉

參考看看我今年的鐵人賽文章
Laravel從入門到放棄…………原生PHP (疑?
ㄜ...
那篇好像還沒出現,
請過兩天再去參考...

0
淺水員
iT邦新手 2 級 ‧ 2019-10-15 23:04:07

因為提問的敘述不夠詳細,所以以下是猜測需求回答的。

資料表中的每一筆資料是「一張圖片」加上「圖片的敘述(或其他文字資料)」所組成
圖片儲存的方式有可能是把圖片儲存在伺服器某資料夾,而資料表中只儲存圖片的路徑名稱

實作方式滿多的,下面列幾個

預先上傳圖片

預先上傳圖片後,再編寫每張圖片的資料,編寫完後再提交以儲存在資料庫

圖片上傳的問題中,有看到上傳圖片的程式碼。但並沒有看到圖片上傳後對 ajax 回應的處理,所以也不知道提問者後端的 uploadFile.php 會回傳甚麼東西。如果 uploadFile.php 可以回傳該圖片儲存在後端的資訊,就可以拿來在下一步(編輯圖片敘述)使用。

在圖片都上傳完畢後,提問者也沒有說「上傳圖片」跟「編輯圖片描述」的頁面是不是同一個頁面。
如果是同一個頁面,那麼剛剛上傳的圖片資訊可以直接從JS變數中取得。
如果是不同頁面,可能需要靠 sessionStorage 或是後端 session 紀錄後,於下一個頁面中傳遞。

而在「編輯圖片描述」的頁面那邊,上傳的表單中必須帶有先前圖片儲存的資訊,這樣才有辦法寫入資料庫。同時如果跨頁,還要考慮如何顯示預覽圖的問題。

上面是「預先上傳所有圖片」的做法。這個方法可能要想一下使用者上傳完圖片卻沒有編輯資料就離開的那些圖片要怎麼清空。

圖片跟敘述一起處理

這方法是假設後端的 api 直接接收「圖片」跟「關於圖片的資訊」,然後儲存到檔案並寫入資料庫。
這個 api 是一次處理一筆資料(1張圖+該圖相關資訊)

前端部分直接用 ajax 依序送資料給後端即可,透過 ajax 回傳的訊息,可以告知使用者哪些資料已經處理完畢,哪些還在等候,或是哪些資料發生錯誤無法儲存到後端。

至於排序的部分,這個方法一樣是可以在排序之後才開始送給,沒問題的。

優點是不用擔心不完整的資訊(只有上傳圖片沒編輯圖片資訊)。
缺點的部分是,整個編輯完才開始上傳資料,上傳過程中使用者會等待。

我要發表回答

立即登入回答