Ts移动端调接口上传图片，使用file传参写法

最新推荐文章于 2024-06-20 20:20:21 发布

行走的茶白

最新推荐文章于 2024-06-20 20:20:21 发布

阅读量101

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/chabaimgg/article/details/134032774

版权

   <van-uploader @delete="deleteImg" v-model="fileList" multiple :after-read="afterRead" :max-count="6" />





//调接口，重点，核心
 private async afterRead(file) {
    this.fileListAll = []
  
//重点是这个
    let formData = new FormData()
    formData.append('file', file.file)
//上方
    let res = await contractImages(formData)
    this.fileArr.push({ img: res.imgUrl, fileName: file.file.name })
    // 添加

    this.fileArr.forEach((item) => {
      this.fileListAll.push(item.img)
    })
    // debugger
    console.log('fileList存放的图片', this.fileListAll, this.fileArr)
  }


//删除
 private async deleteImg(file) {
    console.log('删除', file)
    let res = await contractDeleteImages({ imgName: file.file.name })
    this.fileArr = this.fileArr.filter((item) => {
      return item.fileName != file.file.name
    })
    this.fileListAll = []
    this.fileArr.forEach((item) => {
      this.fileListAll.push(item.img)
    })
    console.log('删除后的fthis.fileArrt', this.fileListAll)
  }