js 使用fetch來上傳文件 formdata()

 <input type="file" name="" id="file">
    <script>
        // 文件上傳
        // 流程: 
        // 1. 客戶端將文件數據發送給服務器
        // 2. 服務器保持上傳的文件到服務端
        // 3. 服務器響應給客戶端一個文件訪問地址
        // 鍵的名稱(表單域名稱): 服務端要求



        // 請求方法: Post
        // 請求表單的格式: 一般爲 multipart/form-data
        // 請求體重必須包含一個鍵值對,鍵的名稱是服務器要求的名稱,值是文件數據

        // HTML中,JS仍然隨意獲取文件數據,但是可以獲取到input元素中,被用戶選中的文件數據

        async function upload() {
            const inp = document.getElementById("file");
            if (inp.files.length === 0) {
                alert("請選擇上傳文件")
                return false;
            }
            // 這裏的請求體自己構建比較麻煩,一般使用HTML5裏面的formData來構建
            const formData = new FormData();
            formData.append("key", inp.files[0]);
            const url = "xxxx.xxx.xxxx";
            const resp = await fetch(url, {
                method: "POST",
                body: formData //自動修改請求頭,formdata的默認請求頭的格式是 multipart/form-data
            })

            const res = await resp.json();
            // res 就是服務器返回的結果
        }

    </script>