39.上传多图功能开发 uni-app

不念不忘少年蓝@ 2022-12-11 13:59 170阅读 0赞

模仿官方例子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70][]

查看![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 1][]

开发如下：

1.复制的html代码

<view class="uni-list list-pd">  
            <view class="uni-list-cell cell-pd">  
                <view class="uni-uploader">  
                    <view class="uni-uploader-head">  
                        <view class="uni-uploader-title">点击可预览选好的图片</view>  
                        <view class="uni-uploader-info">\{ \{imageList.length\}\}/9</view>  
                    </view>  
                    <view class="uni-uploader-body">  
                        <view class="uni-uploader\_\_files">  
                            <block v-for="(image,index) in imageList" :key="index">  
                                  
                                  
                                <view class="uni-uploader\_\_file">  
                                      
                                      
                                      
                                    <view class="icon iconfont icon-shanchu"  @tap="delete1(index)"></view>  
                                    <image class="uni-uploader\_\_img" :src="image" :data-src="image" @tap="previewImage"></image>  
                                </view>  
                            </block>  
                            <view class="uni-uploader\_\_input-box">  
                                <view class="uni-uploader\_\_input" @tap="chooseImage"></view>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>

2. js代码

3.css代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 3][]

附录：完整代码

<template>  
    <view>  
          
          
        <uni-nav-bar  :statusBar="true" rightText="发布" left-icon="arrowleft"  @clickLeft="back"  @clickRight="submit">  
           <view class="u-f-ajc" @tap="changelook">  
               \{ \{yinshi\}\}  
              <view class="icon iconfont icon-xialazhankai"></view>                         
           </view>  
        </uni-nav-bar>  
          
        <textarea class="uni-textarea" v-model="text" placeholder="发布信息" />  
          
        <view class="uni-list list-pd">  
            <view class="uni-list-cell cell-pd">  
                <view class="uni-uploader">  
                    <view class="uni-uploader-head">  
                        <view class="uni-uploader-title">点击可预览选好的图片</view>  
                        <view class="uni-uploader-info">\{ \{imageList.length\}\}/9</view>  
                    </view>  
                    <view class="uni-uploader-body">  
                        <view class="uni-uploader\_\_files">  
                            <block v-for="(image,index) in imageList" :key="index">  
                                  
                                  
                                <view class="uni-uploader\_\_file">  
                                      
                                      
                                      
                                    <view class="icon iconfont icon-shanchu"  @tap="delete1(index)"></view>  
                                    <image class="uni-uploader\_\_img" :src="image" :data-src="image" @tap="previewImage"></image>  
                                </view>  
                            </block>  
                            <view class="uni-uploader\_\_input-box">  
                                <view class="uni-uploader\_\_input" @tap="chooseImage"></view>  
                            </view>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>  
          
          
    </view>  
</template>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70]: /images/20221123/f7469a7e44c84b4b8d62320f67dd9b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/6260488a5c6a4fd89de44dbebeb4756a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/c21a57ca7a8b4263976c8d8f62dc9d9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpeW9uZ3lpemhvbmd4dWVsaQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/2d1196981eef486f9cf71bdf2abf22e4.png