uniapp中上传视频、上传图片的方法

上传视频的方法

选择并上传视频

handleUploadVideo () {
    
    
    const self = this;
    uni.chooseVideo({
    
    
        sourceType: ['camera', 'album'],
        success: function(res) {
    
    
            self.src = res.tempFilePath;
            // 调用上传视频的方法
            self.uploadVideo(res.tempFilePath);
        }
    });
}

说明

handleUploadVideo 方法用于触发视频选择与上传流程。它借助 uni.chooseVideo 让用户从相机拍摄或相册选取视频。若用户成功选择，视频的临时文件路径会存入 self.src，接着调用 uploadVideo 方法上传该视频。

上传视频到服务器

uploadVideo(tempFilePath) {
    
    
    // 先清空之前可能存在的视频地址，避免干扰
    this.videoUrl = '';
    uni.uploadFile({
    
    
        url: this.$baseUrl + `/api/jw.home/upload`,
        filePath: tempFilePath,
        name: 'file',
        formData: {
    
    
            'user': 'test'
        },
        success: (uploadFileRes) => {
    
    
            const responseData = JSON.parse(uploadFileRes.data);
            if (responseData.code === 1) {
    
    
                // 提取视频地址并赋值给 videoUrl 变量，根据实际返回数据结构调整
                this.videoUrl = responseData.data.fullurl;
                this.showText = false;
                uni.showToast({
    
    
                    title: '视频上传成功',
                    icon: 'success'
                });
            } else {
    
    
                uni.showToast({
    
    
                    title: '视频上传成功，但返回数据格式不符预期',
                    icon: 'none'
                });
            }
        },
        fail: (err) => {
    
    
            console.log(err, '文件上传失败');
            uni.showToast({
    
    
                title: '视频上传失败，请检查网络或文件格式是否正确',
                icon: 'none'
            });
        }
    });
}

说明

uploadVideo 方法负责将选中的视频文件上传到服务器。上传前会清空 this.videoUrl 以避免干扰。通过 uni.uploadFile 把视频文件发送到指定 API 地址，根据服务器响应进行处理：
若 responseData.code 为 1，表明上传成功且数据格式正确，将视频完整地址存入 this.videoUrl，隐藏提示文本并显示上传成功的消息。
若 responseData.code 不为 1，说明上传成功但数据格式不符，显示相应提示。
若上传出错，在控制台输出错误信息并显示上传失败的提示。

上传图片的方法

选择并上传图片

handleUploadPic () {
    
    
    uni.chooseImage({
    
    
        success: (chooseImageRes) => {
    
    
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({
    
    
                url: this.$baseUrl + `/api/jw.home/upload`, // 仅为示例，非真实的接口地址
                filePath: tempFilePaths[0],
                name: 'file',
                formData: {
    
    
                    'user': 'test'
                },
                success: (uploadFileRes) => {
    
    
                    const responseData = JSON.parse(uploadFileRes.data);
                    if (responseData.code === 1) {
    
    
                        // 提取图片地址并赋值给 imageUrl 变量
                        this.imageUrl = responseData.data.fullurl;
                        this.showText = false;
                        uni.showToast({
    
    
                            title: '图片上传成功',
                            icon: 'success'
                        });
                    } else {
    
    
                        // this.showText = true;
                        uni.showToast({
    
    
                            title: '图片上传成功，但返回数据格式不符预期',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
    
    
                    console.log(err, '文件上传失败');
                    uni.showToast({
    
    
                        title: '图片上传失败，请检查网络或文件格式是否正确',
                        icon: 'none'
                    });
                }
            });
        }
    });
}

说明

此 handleUploadPic 方法用于图片选择与上传。它使用 uni.chooseImage 让用户选择图片，选择成功后获取临时文件路径，再通过 uni.uploadFile 上传到指定 API 地址。根据服务器响应处理结果：
若 responseData.code 为 1，将图片完整地址存入 this.imageUrl，隐藏提示文本并显示上传成功消息。
若 responseData.code 不为 1，显示数据格式不符的提示。
若上传出错，在控制台输出错误信息并显示上传失败提示。