美文网首页
uniapp实现选取本地相册图片,并上传

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

作者: 壹家全栈 | 来源:发表于2023-12-06 15:54 被阅读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再传给接口即可。

                    });

            }

})

相关文章

网友评论

      本文标题:uniapp实现选取本地相册图片,并上传

      本文链接:https://www.haomeiwen.com/subject/tkpjgdtx.html