当前位置: 首页 > 工具软件 > v-uploader > 使用案例 >

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

马阳曦
2023-12-01
      <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)
      })
    }

这个插件可以直接控制最多传几张 postData.length控制

 类似资料: