van-uploader上传文件以及删除文件

原创

Danna123 2022-05-27 00:42:20 ©著作权

©著作权归作者所有：来自51CTO博客作者Danna123的原创作品，请联系作者获取转载授权，否则将追究法律责任

<div :class="postData.length>2?'upload-img-5':'upload-img-1'">
    <div class="posting-uploader">
        <span v-for="(item,nn) in postData" :key="nn">
        <img :src="item.content" alt="图片" class="uploadimg">
        <van-icon name="close" @click="delImg(nn)" class="delte"/>
        </span>
        <van-uploader :after-read="onRead" :accept="'image/*'" v-show="postData.length<=2">
            <van-icon name="tianjia-" color="#999999" size="1rem" />
        </van-uploader>
    </div>
</div>

在data里面定义字段：

postData: [], fileIds: []

方法定义：

delImg (index) {
    // 删除指定下标的图片对象
    if (isNaN(index) || index >= this.postData.length) {
        return false
    }
    let tmp = []
    for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
            tmp.push(this.postData[i])
        }
    }
    this.postData = tmp
    this.fileIds.splice(index,1)
},
onRead (file) { // 上传图片到图片服务器
    this.postData.push(file)  // postData是一个数组
    var fd={
        'fileType':'FILE',
        'file':file.content
    }
    this.$http.post('/api/app/files/image', fd).then(res => {
        this.fileIds.push(res) //这里上传到指定的图片服务器，成功后会返回图片的url
    }).catch(err => {
        alert(err)
    })
}