uniapp利用uview2.0中的uploadFile组件实现多张图片的增删预览上传功能

效果图

 

<template>
    <view>
        <view class="main-intro" style="background-color: #fff;">
            <view class="main-intro-title">请添加物品图片（建议图片大小不要超过2M）</view>
            <u-upload :fileList="fileList1" :previewFullImage="true" @afterRead="afterRead1" @delete="deletePic1" name="1" :maxCount="9" width="90" height="90">
            </u-upload>
        </view>
    </view>
</template>
<script>
export default{
data(){
    return{
      fileList1: [],
      img1: [] //当前图片数组
          }
      },
  methods: {
           //删除图片
          deletePic1(event) {
                this[`fileList${event.name}`].splice(event.index, 1)
                var arry = []
                this.fileList1.filter((v, i) => {
                    arry.push(v.url)
                })
                this.img1 = arry
                console.log(this.img1, "1");
            },
            // 新增图片
            async afterRead1(event) {
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise1(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    fileListLen++
                }
                var arry = []
                this.fileList1.filter((v, i) => {
                    arry.push(v.url)
                })
                this.img1 = arry
                console.log(this.img1, "1");
            },
            uploadFilePromise1(url) {
                return new Promise((resolve, reject) => {
                    let a = uni.uploadFile({
                        url: '服务器域名', //oss域名自己设
                        filePath: url,
                        name: 'image',
                        success: (res) => {
                            setTimeout(() => {
                                resolve(JSON.parse(res.data).data) //服务器返回图片带域名
                                //服务器返回图片不带域名需要自己拼接域名 否则预览图片无法实现
                                resolve('服务器域名' + JSON.parse(res.data).data)
                            }, 1000)
                        }
                    });
                })
            },
          }
       }
</script>