uniapp uview 上傳圖片,資料以formData + File 形式傳輸

ziming007發表於2022-08-31
APPViewORM

期望

後端期望前端給的傳參為 formData 形式, 同時檔案的資料型別為File 形式.

解決過程

將檔案處理為 File 格式

uview 中的 upload 元件點選上傳之後不是標準的 File 形式,點選上傳單個檔案之後的控制檯資訊如下:

[
    {
        "url": "blob:http://localhost:8081/c16e50ca-767b-4de1-93b4-0446656c3e4d",
        "progress": 0,
        "error": false,
        "file": {
            "name": "440k.jpg",
            "lastModified": 1658970439074,
            "lastModifiedDate": {},
            "webkitRelativePath": "",
            "size": 449462,
            "type": "image/jpeg"
        }
    }
]

故需對 file 內容進行二次加工. 將生成的 blob url 地址處理成 File 檔案流形式.
程式碼如下:

// 上傳圖片回撥
onChooseOne(lists) {
    console.log(lists)
    // 將獲取到的資訊放入上傳列表中
    this.pushFileList('fileListOne', lists)
},
// 公共新增檔案資訊
async pushFileList(fileList, info) {
    this[fileList] = []
    info.forEach(async item => {
        // 載入blob檔案
        const imgBlob = await fetch(item.url).then(r => r.blob())
        // 迴圈生成file檔案流
        this[fileList].push({
            url: item.url,
            info: new File([imgBlob], item.file.name, {
                type: item.file.type
            })
        })
    })
},

最後處理完成之後形式如下:

uniapp uview 上傳圖片,資料以formData + File 形式傳輸

這時要傳輸的資訊已經準備好

將資料其處理成 formData 形式

// 將資料處理成formData形式
addForm(params) {
    // 將json資料處理為form格式
    let newFile = new FormData();
    let keys = Object.keys(params);
    let values = Object.values(params);
    values.forEach((item, index) => {
        if (typeof item === 'object' && item) {
            item.forEach((item1) => {
            newFile.append(`${keys[index]}`, item1);
        });
        } else {
            newFile.append(`${keys[index]}`, item);
        }
    });
    return newFile;
},

同時需要更改 api 請求方式. 因為 uniapp 的 uni.request 預設不支援 formData 形式資料, 官網文件如下:

uniapp uview 上傳圖片,資料以formData + File 形式傳輸

所以我們退而求其次, 直接安裝 axios 後, 直接使用 axios 進行請求. 我們需要為請求頭增加 formData 請求型別, 最後封裝後的 api 請求如下:

const url = 'xxx你的請求地址'
const config = {
    headers:{
    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryXkII0NmP1jsvIgZC'
    }
};
return new Promise((resolve, reject) => {
    axios.post(url, data, config)
        .then((res) => {
            resolve(res)
        })
        .catch((err) => {
            reject(err)
        })
})

結果

最後處理之後的請求資料為表單資料, 介面對接完畢:

uniapp uview 上傳圖片,資料以formData + File 形式傳輸

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章