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

微信小程序项目注册需要上传门店信息，所以需要用到上传图片功能。

可以分为两种情况：

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

附上效果图：

在这里插入图片描述