uni-app 多图上传 删除 查看大图 填坑

之前用iview-admin 做了几个erp项目 闲下来在写下动态路由菜单的实现
最近做的一个项目用到了uni 的图片上传 果断先看下官方api 直达

先看下单图上传

贴下示例代码 看api就行 这里说下 单图上传 filePath， name，两个属性。 多图上传这两个属性无效 用files

uni.chooseImage({
    count: 1, //限定上传张数
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择 camera 是相机
    success: function (res) {
     const tempFilePaths = res.tempFilePaths;
     const uploadTask = uni.uploadFile({
      url : 'https://xxxx', //后台的上传地址
      filePath: tempFilePaths[0],//
      name: 'file',
      formData: {
       'user': 'test'
      },
      success: function (uploadFileRes) {
       console.log(uploadFileRes.data);
      }
     });
    error : function(e){
     console.log(e);
    }
   });

单图上传还是很简单的

在说下多图上传
贴代码 我们后台是用的php name 接收的数一个fileimg[]数组

首先说下多图上传 用的是files: [{name:fileimg[0],uri:res.tempFilePaths[0]}] 这里要注意下是uri 不是url 一定要注意 否则报错 files 平台支持 5+app 具体可看代码逻辑 还有就是相册可选图片数要做成动态的

let that = this
uni.chooseImage({
    count: that.cunt, // 从系统相册可选照片张数  要动态计算
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['camera', 'album'], //从相册选择 或拍照
    success: (res) => {
        that.img = []
        const tempFilePaths = res.tempFilePaths;
        console.log(res.tempFiles.length, that.imgData.length)
        for (let i = 0; i < res.tempFiles.length; i++) {
            let obj = new Object();
            obj.name = 'fileimg[' + i + ']';
            obj.uri = res.tempFiles[i].path;
            that.img.push(obj);
            obj = null;
        }
        const uploadTask = uni.uploadFile({
            url: 'http://xxxxx', 
            files: that.img,
            success: function (uploadFileRes) {
                let imgData = JSON.parse(uploadFileRes.data)
                if (imgData.data.length > 0) {
                    that.imgDataL = imgData.data
                    console.log(that.imgDataL, imgData)
                    uni.showToast({
                        icon: 'success',
                        position: 'bottom',
                        title: '上传成功'
                    });
                    console.log(that.imgData.length, that.imgDataL.length)
                    if (that.imgData.length != 0) {
                        that.imgData = that.imgData.concat(that.imgDataL)
                        //动态计算 否则每次选都能选4张
                        that.cunt = 4 - that.imgData.length
                    } else {
                        that.imgData = that.imgDataL
                        //动态计算 否则每次选都能选4张
                        that.cunt = 4 - that.imgData.length
                    }
                }
            }
        });
    }
});

貌似也很简单 这个uri 不想多说了

删除 没什么可说的

let that = this
uni.showModal({
    title: '用户',
    content: '确定要删除这张照片吗？',
    cancelText: '点错了',
    confirmText: '删除',
    success: res => {
        if (res.confirm) {
            this.imgData.splice(e, 1)
            //动态计算 否则每次选都能选4张
            that.cunt = 4 - that.imgData.length
        }
    }
})

预览 也没什么说的 看文档即可

//urls 直接收 ['imgurl','imgurl'] 转换下
var imgArr = []
this.imgData.forEach(item => {
    console.log(item)
    imgArr.push(item.picurl)
})
//e 是索引 查看当前图片大图
uni.previewImage({
    urls: imgArr,
    current: e
});

html

<form style="z-index: 996;">
    <view class="cu-form-group" style="z-index: 996;">
        <view class="grid col-4 grid-square flex-sub">
            <view class="bg-img" v-for="(item,index) in imgData" : key="index" @tap="ViewImage(index)"
                :data-url="imgList[index]">
                <image : src="imgData[index].picurl" mode="aspectFill"></image>
                <view class="cu-tag bg-red" @tap.stop="DelImg(index)" :data-index="index">
                    <text class='cuIcon-close'></text>
                </view>
            </view>
            <view class="solids" @tap="ChooseImage" v -if="imgData.length<4">
                <text class='cuIcon-cameraadd'></text>
            </view>
        </view>
    </view>
</form>

写了估计也没人看 只是记录下