fillano
我看到也覺得Request格式JsonArray裡面混 File 跟一般的文字內容的設計真的讓人很困擾

我印象中是不是可以用一個陣列分開獨立放所有的 File
例如：

formData.append('pic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('pic[]', myFileInput2.files[0], 'chris2.jpg');

如果是的話，我可能必須跟開規格的溝通改設計了...

如果你熟各種form的body格式就知道，他的要求真的有問題XD

multi part格式的request，會在標頭先定義一個part的分隔字串，然後在request body中，分隔字串之間，會有各個part的header跟body。欄位名稱、檔案名稱等會放在part的header，欄位值或檔案內容會放在part body。這裡面不可能空降一個json字串，還有辦法各自剖析。但是當作欄位的值是沒問題的。

content-type是application/json的request，request body就只有json字串，加上其他東西剖析就會失敗（不合法的json），不可能用form的方式再來上傳檔案。

感謝 fillano 大大 協助
今天一整個早上都在檢視這個需求

是input=file 的實際的內容

這樣子是不是在FormData直接拉兩個陣列，一個專門放File，另一個放圖片文字資訊的Json會比較恰當？

{
    Files: [圖片1的input file內容, 圖片2的input file內容],
    ImagesInfo: [
        {
            "FileName":"檔案1",
            "ImageIndex": 1,
            "ImageRemark":"圖片1說明",
        },
        {
            "FileName":"檔案2",
            "ImageIndex": 2,
            "ImageRemark":"圖片2說明",
        },
    ]
}

是的話，我就必須跟開規格的溝通改設計了

雖然問題好像解決了，不過我還是回一下
原先 ImageFile 欄位要放檔案內容是可以的
只是要轉成 base64 編碼
然後後端再把 base64 編碼還原後儲存起來就可以
PS. 這邊我也不用 multipart form 傳送了，直接送 JSON
html

<input type='file' id='fileupload' multiple>

javascript

function readFileAsPromise(file)
{
    return new Promise((success, error)=>{
        let frd=new FileReader();
        frd.onload=function(){
            success({
                name: file.name,
                buffer: this.result.split(';base64,')[1]
            });
        }
        frd.readAsDataURL(file);
    });
}

document.querySelector('#fileupload').addEventListener('change', function(evt){
    let readFiles=Array.from(evt.target.files).map(f=>readFileAsPromise(f));
    Promise.all(readFiles).then((readerArray)=>{
        let filesData=readerArray.reduce((arr,rd,idx)=>{
            arr.push({
                FileName: rd.name,
                ImageIndex: idx,
                ImageFile: rd.buffer,
                ImageRemark: '備註說明'+idx
            });
            return arr;
        },[]);
        console.log(filesData);
        return fetch('reciver.php', {
            method:'post',
            body: JSON.stringify({
                time: Date.now(), //可以放一些其他資訊
                files: filesData
            })
        });
    });
});

後端我不知道你們用甚麼語言，這是 PHP 的範例

<?php
//只是示範，忽略錯誤處理跟檢查
$jsonStr=file_get_contents('php://input');
$requestData=json_decode($jsonStr, true);
$timestamp=$requestData['time'];
foreach($requestData['files'] as $fileInfo) {
    $name=$timestamp.$fileInfo['FileName'];
    $data=base64_decode($fileInfo['ImageFile']);
    file_put_contents($name, $data);
}

感謝淺水員

最後請開規格的將設計修改成開兩個陣列：
一個陣列放所有input type=file的欄位，做檔案的相關處理
另一個陣列放Json Array的字串，傳到後端轉換處理

這樣做是因為開規格的不想讓後端處理url encode

算是你提供的轉Json字串方案+我的想法。