zoukankan      html  css  js  c++  java
  • 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{
             200upx;
            height: 200upx;
        }
    </style>
  • 相关阅读:
    s
    qq
    qqq
    q
    qq
    http请求报文
    qq
    q
    qqq
    java对象-String的用法
  • 原文地址:https://www.cnblogs.com/swt-axios/p/13491746.html
Copyright © 2011-2022 走看看