新闻中心

记录团队成长点滴以及对技术、理念的探索,同时我们乐于分享!

uni-app 微信小程序 上传图片 文件 uni.uploadFile() 、 uni.chooseImage()

2021-01-31 20:28:01 分类:技术学堂

1.实时上传,接口返回url,返显图片地址预览。所需API: uni.uploadFile()、uni.chooseImage()。
2.统一上传,接口统一接受所需字段,图片本地地址预览。所需API: uni.chooseImage()。
一、实时上传
点击选择框 首先使用uni.chooseImage(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后调取uni.uploadFile()

uni.chooseImage({
    success: (chooseImageRes) => {
        // 获取的格式是数组,多选会同时返回,单选只返回一项
        const tempFilePaths = chooseImageRes.tempFilePaths;
        // 若多选,需循环调用uni.uploadFile ,因微信小程序只支持单文件上传
        uni.uploadFile({
            url: '', //仅为示例,非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
                'user': 'test'  // 上传附带参数
            },
            success: (uploadFileRes) => {
                // 根据接口具体返回格式   赋值具体对应url
                console.log(uploadFileRes.data);
            }
        });
    }});


官方链接:uni.uploadFile

二、统一上传
点击选择框 首先使用uni.chooseImage(),从本地相册选择图片或使用相机拍照。成功则返回图片的本地文件路径列表 tempFilePaths;然后本地赋值保存本地图片地址。

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album'], //从相册选择
    success:  (chooseImageRes) => {
        // 获取的格式是数组,多选会同时返回,单选只返回一项
        this.imgArr.push(chooseImageRes.tempFilePaths)
    }
});
// 点击上传后循环调用uni.uploadFile ,因微信小程序只支持单文件上传
    this.imgArr.forEach(ele => {
        ele.forEach(item => {
            uni.uploadFile({
                url: '', //仅为示例,非真实的接口地址
                filePath: item,
                name: 'file',
                formData: {
                    'user': 'test'  // 上传附带参数
                },
                success: (uploadFileRes) => {
                    // 根据接口具体返回格式   赋值具体对应url
                    console.log(uploadFileRes.data);
                }
            });
        })
    })

官方链接uni.chooseImage