uniapp实现选取本地相册图片,并上传

2023-12-06  本文已影响0人  壹家全栈

//1.第一步:首先,我们要明白,uniapp获取本地相册的图片,然后我们就可以得到相册所选取的图片。由下面的函数实现:

uni.chooseMedia({

        count:1,

        mediaType:['image'],

        sourceType:['album','camera'],

        camera:'back',

        success(res){

                console.log("--imga---") 

                console.log(res.tempFiles)   //在这里我们就获取到了本地相册的图片数组,这个数组的数据由你选择的图片数量有关,具体的函数用法,可以参考uniapp的官方文档

               // 2.第二步在这里写,当你得到了本地相册的图片的时候,那么你就需要去调取上传图片的接口,把图片上传到服务器上去。

                uni.uploadFile({

                        url: 'https://yjb.xcx.yazyun.xyz/api/Common/upload',

                        filePath: res.tempFiles[0].tempFilePath,

                        name: 'file',

                        formData:{

                            file:res.tempFiles[0]

                        },

                    header: {

                        token:uni.getStorageSync('token')

                    },

                    success: (uploadFileRes) => {

                            console.log(uploadFileRes.data);

                            //3.第三步就在这里拉,当你上传了本地的图片到服务器上的时候,服务器会返回给你一个图片在服务器所在的位置url,你可以用这个url去反显到你的image上,然后当你做新增或者修改图片的时候,把这个url再传给接口即可。

                    });

            }

})

上一篇 下一篇

猜你喜欢

热点阅读