[Uniapp] APP拍照後轉換Base64上傳

WikiChen發表於2024-11-06
APP

元件（2選1）：

1. uni-file-picker : https://uniapp.dcloud.net.cn/component/uniui/uni-file-picker.html

2. u-upload : https://uviewui.com/components/upload.html

思路：

不想直接把圖片存到資料庫，因為想著圖片是小檔案，也不是重要檔案，乾脆存到資料庫裡就好了。

因此，計劃在前端上傳圖片的時候，轉成arraybuffer之類的，再存到資料庫裡，表設計的欄位為byte[] , 在MSSQL中型別為Image

過程：

實際傳參的時候，用的是JSON物件（要傳很多引數，如果只有檔案資料還好說，用FormData傳過去），結果arraybuffer，Uint8Array都傳不過去，也用了下FormData的方式，都不行，應該說是不懂怎麼用。

後來想著傳Base64過去，但需要用string型別欄位先接收，在後端把string轉成byte[] （C#裡的Convert.FromBase64String()方法）

在 u-upload的@afterRead="afterRead"方法裡用e.tempFilePaths[0]開始轉換Base64 ， 或者在 uni-file-picker 的@select="select"方法裡用lists[i].url開始轉換Base64.

select(e) {
   console.log('選擇檔案：', e)
   // e.tempFilePaths[0]
} 

afterRead(event) {
    // 當設定 multiple 為 true 時, file 為陣列格式，否則為物件格式
    let lists = [].concat(event.file)
    for (let i = 0; i < lists.length; i++) {
        // lists[i].url
        }       
}

一開始在電腦上用瀏覽器的方式測試，轉換Base64，能夠正常執行, 後來到APP上一試，發現不行了，點選拍照後確定，回到介面時沒有把圖片載入到控制元件裡。

                return new Promise((resolve, reject) => {
                    uni.request({
                        url: url,
                        method: 'GET',
                        responseType: 'Arraybuffer',
                        success: res => {
                            console.log(res)
                            let base64 = uni.arrayBufferToBase64((res.data))
                            resolve(base64)
                        },
                        fail: (e) => {
                            reject(e)
                        }
                    })
                })

最後在網上找到了CompressImage方法，終於成功了。

                return new Promise((resolve, reject) => {
                    // #ifdef H5
                    uni.request({
                        url: url,
                        method: 'GET',
                        responseType: 'Arraybuffer',
                        success: res => {
                            console.log(res)
                            let base64 = uni.arrayBufferToBase64((res.data))
                            resolve(base64)
                        },
                        fail: (e) => {
                            reject(e)
                        }
                    })
                    // #endif


                    // #ifdef APP
                    uni.compressImage({
                        src: url,
                        quality: 100,
                        success: (res) => {
                            const tempUrl = res.tempFilePath
                            plus.io.resolveLocalFileSystemURL(tempUrl, (entry) => {
                                entry.file((e) => {
                                    let fileReader = new plus.io.FileReader();
                                    fileReader.onload = (r) => {
                                        console.log(r.target.result)
                                        resolve(r.target.result)
                                    }
                                    fileReader.readAsDataURL(e)
                                })
                            })
                        },
                        fail: (e) => {
                            reject(e)
                        }
                    })
                    // #endif

                })

相關文章