uniapp上传图片

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>