https://uniapp.dcloud.io/api/media/image?id=chooseimage uniapp地址

https://uniapp.dcloud.io/api/media/image

<template>
    <view>
        <view class="_c">
            uniapp中的    圖片上傳 和  預覽圖片
        </view>
        <view>
            <view class="upload_img">
                <button type="default" @click="upload_img">本地上傳圖片 || 呼叫相機拍照上傳</button>
            </view>
            <view class="img_box">
                <view class="img_c" v-for
 
="(item,index) in img_list" :key="index">
                    <image :src="item" mode="" class="img" @click="preview_img(item)"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            
 
return {
                img_list:[]
            }
        },
        methods: {
            //上傳圖片
            upload_img(){
                uni.chooseImage({
                    count:3,
                    sizeType:["original","compressed"],
                    success:(res)=>{
                        console.log(res);
                        
 
this.img_list = res.tempFilePaths;
                        console.log(this.img_list);
                    }
                });
            },
            //預覽圖片
            preview_img(img_url){
                uni.previewImage({
                    current:img_url,
                    // urls:[img_url],   //單個圖片預覽
                    urls:this.img_list,  //多張圖片預覽
                    indicator:"default",
                    success:(res)=>{
                        console.log("預覽圖片成功",res);
                    }
                })
            }
        }
    }
</script>

<style>
    ._c{
        text-align: center;
        color: red;
    }
    .img_box{
        display: flex;
        justify-content: space-around;
    }
    .img{
        width: 200upx;
        height: 200upx;
    }
</style>