美文网首页
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