PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HBuilderX教程 > 正文

    uniapp多图片上传

    作者:admin来源:网络浏览:时间:2021-01-19 13:04:57我要评论
    导读:uniapp 项目开发中,经常用到多图片上传,今天分享一下项目里使用的多图片上传
    uniapp 项目开发中,经常用到多图片上传,今天分享一下项目里使用的多图片上传

    HTML

    1. <div class="upload-img-box"
    2.     <div class="box" v-for="(item,index) in totalImg" :key='index'
    3.         <img class="pre-img" :src="item" @click="previewImage(index)" alt=""/> 
    4.         <img class='delete' src='https://static-c.ehsy.com/m/images/delete.png' @click='deleteImg(index)'
    5.     </div> 
    6.     <div class="box" id='fileUploadBtn' @click="chooseImgs()" v-show="totalImg.length < 9"
    7.         <img class='upload_img' src="https://static-c.ehsy.com/m/images/addImage.png" alt=""
    8.     </div> 
    9. </div> 

    data

    totalImg是指压缩后的图片,sourceImg是指未压缩的图片
     

    1. data() { 
    2.     totalImg:[], 
    3.     sourceImg:[]          

    js

    选择多张图片

     

    1. chooseImgs:function(){ 
    2.                 var _this = this 
    3.                 uni.chooseImage({ 
    4.                     count:9, 
    5.                     sizeType:['original''compressed'], 
    6.                     sourceType: ['album'], //从相册选择 
    7.                     success:(res) => { 
    8.                         // console.log(res.tempFilePaths) 
    9.                         for(let i=0;i<res.tempFilePaths.length;i++){ 
    10.                             const tempFilePaths = res.tempFilePaths[i] 
    11.                             let base64 
    12.                             uni.getImageInfo({ 
    13.                                 src:tempFilePaths, 
    14.                                 success:function(res) { 
    15.                                     // console.log('压缩前', res) 
    16.                                     _this.sourceImg.push(res.path) 
    17.                                     let canvasWidth = res.width //图片原始长宽 
    18.                                     let canvasHeight = res.height 
    19.                                     let base = canvasWidth / canvasHeight 
    20.                                     if (canvasWidth > 5000) { 
    21.                                         canvasWidth = 5000; 
    22.                                         canvasHeight = Math.floor(canvasWidth / base) 
    23.                                     } 
    24.                                     let img = new Image() 
    25.                                     img.src = res.path 
    26.                                     let canvas = document.createElement('canvas'); 
    27.                                     let ctx = canvas.getContext('2d'
    28.                                     canvas.width = 70 
    29.                                     canvas.height = 70 
    30.                                     ctx.drawImage(img, 0, 0, 70, 70) 
    31.                                     canvas.toBlob(function(fileSrc) { 
    32.                                         let imgSrc = window.URL.createObjectURL(fileSrc) 
    33.                                         _this.totalImg.push(imgSrc) 
    34.                                     }) 
    35.                                 } 
    36.                             }) 
    37.                         } 
    38.                         console.log(_this.sourceImg) 
    39.                         console.log(_this.totalImg) 
    40.                     } 
    41.                 }) 
    42.             } 

    (1)uni.getImageInfo() 的src是string类型,指向图片的路径,一次只能处理一张图片,所以在多图情况下需要进行遍历处理。uni.getImageInfo() 参数描述如下:


    uniapp多图片上传


    详细返回参数及用法请移步uniapp官网相关文档:(https://uniapp.dcloud.io/api/media/image?id=getimageinfo)

      (2)压缩图片是将图片画在canvas上面,使用canvas来进行压缩


    uniapp多图片上传


       预览图片

      uniapp提供的预览图片接口:uni.previewImage() 中的属性loop、indicator、longPressAction是APP下才生效,H5及小程序不生效。
     

    1. previewImage:function(index){ 
    2.                 var _this = this 
    3.                 let imgSrc = _this.sourceImg 
    4.                 uni.previewImage({ 
    5.                     current:_this.sourceImg[index], 
    6.                     urls:imgSrc, 
    7.                     // #ifdef APP-PLUS 
    8.                     loop:true
    9.                     indicator:'number'
    10.                     longPressActions:{ 
    11.                         itemList: ['发送给朋友''保存图片''收藏'], 
    12.                         success: function(data) { 
    13.                             console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片'); 
    14.                         }, 
    15.                         fail: function(err) { 
    16.                             console.log(err.errMsg); 
    17.                         }                 
    18.                     }, 
    19.                     // #endif 
    20.                     success:function(res){ 
    21.                     } 
    22.                 }) 
    23.                  
    24.             } 


     删除图片

    deleteImg:function(index){
        var _this = this
        _this.totalImg.splice(index,1)
        _this.sourceImg.splice(index,1)
    }
      此处特别提示,splices()会影响到原数组,如果不想影响到原数组请用silce(),splice可以用来对数组进行删除、添加和替换的操作。

        1. 删除    splice(index,count)

        index是指删除开始的地方,count是指要删除的个数

        2.添加    splice(index,0,newVal)

        index 是想替换的元素的位置,newVal是想要插入的项

        3.替换  splice(index,count,newVal)

        index 是替换开始的位置,count 是想要替换的数量,newVal是想要替换的项

        返回的是被替换的数组元素,具体如下:
    uniapp多图片上传

    css

     

    1. .upload-img-box{ 
    2.             width: 100%; 
    3.             overflow: hidden; 
    4.             .box{ 
    5.                 width: 25%; 
    6.                 height: 0; 
    7.                 padding-bottom: 25%;        //    
    8.                 float: left; 
    9.                 margin-top: 30px; 
    10.                 text-align: center; 
    11.                 position: relative; 
    12.                 .pre-img{ 
    13.                     left: 50%; 
    14.                     top: 0; 
    15.                     transform: translateX(-50%); 
    16.                     position: absolute; 
    17.                 } 
    18.                 .delete
    19.                     z-index: 5; 
    20.                     width: 28%; 
    21.                     position: absolute; 
    22.                     top: -12%; 
    23.                     left: 72%; 
    24.                 } 
    25.             } 
    26.         } 

    设置height=0、padding-bottom = 25% 是为了得到一个等宽高的div来放我们选定的图片,height索然设置为0,但是padding-bottom是相对于父元素的宽度而言的,会撑开高度,设置padding-bottom的值与宽度一致,就会生成一个宽高1比1的容器。

    上传图片
      调用uni.uploadFile()即可,参数说明如下:(https://uniapp.dcloud.io/api/request/network-file?id=uploadfile)


    uniapp多图片上传


        小程序需要配置业务域名白名单,H5需要解决跨域问题。

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-146-6484-1.html
    相关热词搜索: uniapp多图片上传