uniapp上傳圖片名字維持不變

在uniapp中，我們經常使用到上傳圖片的功能，但是預設情況下，上傳圖片的檔案名稱會被重新命名或不同的平台會有不同的表現，這對於後端處理和前端展示都會帶來不小的問題。所以，在開發中，我們往往需要保持上傳的圖片名字不變。

本文將介紹在uniapp中如何實作上傳圖片名字保持不變的方法。

一、前言

在uniapp中，圖片上傳主要使用uni.uploadFile() 的API介面。透過這個接口，我們可以上傳圖片到伺服器。但是，uni.uploadFile() 會根據不同平台或檔案特殊命名規則為圖片檔案命名，導致我們無法很好地處理上傳的圖片。那麼，在使用 uni.uploadFile() 時，如何保持上傳圖片的名字不變呢？

二、取得上傳圖片原始資訊

我們可以透過uni.chooseImage() API介面選取圖片時，取得圖片的原始信息，取得檔案名稱和後綴名。

uni.chooseImage({
    count: 1,
    success: function(res) {
        uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function(infoRes) {
                //文件名
                var fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
                //后缀名
                var extName = fileName.substring(fileName.lastIndexOf('.'));
            }
        });
    }
});

三、使用 formData 物件上傳圖片

之前我們使用uni.uploadFile()介面上傳圖片，但是，該介面的file參數只能接受檔案路徑，不能接收 FormData 物件。在 this.formData 中，我們可以建立 FormData 對象，將上傳圖片的檔案名稱與檔案資料一起上傳。

uni.chooseImage({
    count: 1,
    success: function(res) {
        uni.getImageInfo({
            src: res.tempFilePaths[0],
            success: function(infoRes) {
                //文件名
                var fileName = res.tempFilePaths[0].substring(res.tempFilePaths[0].lastIndexOf('/') + 1);
                //后缀名
                var extName = fileName.substring(fileName.lastIndexOf('.'));

                // 将文件数据赋值到formData对象中
                this.formData = new FormData();
                this.formData.append('file', res.tempFiles[0].path, fileName + extName);
                console.log('开始上传文件')
                uni.uploadFile({
                    url: '上传文件的url',
                    filePath: res.tempFilePaths[0],
                    name: 'file',
                    formData: this.formData,
                    success: function (res) {
                        console.log(res);
                    }
                });
            }
        });
    }
});

透過以上方式，我們就可以保持上傳圖片的名字不變。

四、總結

在 uniapp 中上傳圖片，我們可以透過取得圖片的原始資訊來取得檔案名稱和後綴名，然後再將檔案名稱和資料一起上傳。這樣就可以解決由於不同平台或特殊命名規則所帶來的問題，可以更好地處理上傳的圖片。

以上是uniapp上傳圖片名字維持不變的詳細內容。更多資訊請關注PHP中文網其他相關文章！