Vue中的FormData上傳是一種常見的文件上傳方式,它可以通過XMLHttpRequest對象將表單數據和文件異步上傳到服務器端。在Vue中,使用FormData上傳文件需要以下步驟。
第一步是創建FormData對象,可以通過new FormData()來完成。
let formData = new FormData();
第二步是向FormData對象中添加數據,在上傳文件時,需要使用append方法指定文件的名稱和文件本身。
formData.append('file', file);
第三步是使用XMLHttpRequest對象發送請求,通過監聽XMLHttpRequest對象的上傳進度和響應結果,可以了解上傳的狀態和結果。
let xhr = new XMLHttpRequest(); xhr.onprogress = function (evt) { if (evt.lengthComputable) { let percentComplete = evt.loaded / evt.total; console.log(percentComplete); } }; xhr.open('POST', '/upload', true); xhr.send(formData);
注意,在使用FormData上傳文件時,需要在form元素中添加enctype="multipart/form-data"屬性,才能正確上傳文件。
最后,需要注意的是,FormData上傳只支持現代瀏覽器,在舊版瀏覽器中可能存在兼容性問題。