The name of the image uploaded by uniapp remains unchanged

In uniapp, we often use the function of uploading images, but by default, the file name of the uploaded image will be renamed or different platforms will have different performances, which will affect both back-end processing and front-end display. Causes quite a problem. Therefore, during development, we often need to keep the name of the uploaded image unchanged.

This article will introduce how to keep the name of the uploaded image unchanged in uniapp.

1. Foreword

In uniapp, image upload mainly uses the API interface of uni.uploadFile(). Through this interface, we can upload images to the server. However, uni.uploadFile() will name image files according to different platforms or special file naming rules, causing us to be unable to handle uploaded images well. So, how to keep the name of the uploaded image unchanged when using uni.uploadFile()?

2. Obtain the original information of the uploaded image

We can obtain the original information of the image and obtain the file name and suffix when selecting the image through the uni.chooseImage() API interface.

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('.'));
            }
        });
    }
});

3. Use the formData object to upload images

Before we used the uni.uploadFile() interface to upload images. However, the file parameter of this interface can only accept file paths and cannot receive FormData objects. In this.formData, we can create a FormData object and upload the file name of the uploaded image together with the file data.

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);
                    }
                });
            }
        });
    }
});

Through the above method, we can keep the name of the uploaded image unchanged.

4. Summary

When uploading images in uniapp, we can obtain the file name and suffix by obtaining the original information of the image, and then upload the file name and data together. This can solve problems caused by different platforms or special naming rules, and can better handle uploaded images.

The above is the detailed content of The name of the image uploaded by uniapp remains unchanged. For more information, please follow other related articles on the PHP Chinese website!