Ts中El-upload上传不了图片,回显也回显不了,需要token写法

 <el-upload
          :limit="6"
          :before-upload="beforeAvatarUpload"
          :on-success="onSuccess"
          :on-exceed="handleExceed"
          :action="uploadAddr"
          :headers="{
            token: token()
          }"
          ref="upload"
          list-type="picture-card"
          :file-list="fileList"
          multiple
          :on-change="handleIntroduceUploadHide"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
          <!-- :before-upload="beforeAvatarUpload" -->
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>




//这块是token
private token = () => {
    return this.$store.state.system.token
  }




  private dialogAddorEdit: Boolean = false
  private titles: string = ''
  private id: string = ''
  private uploadAddr: string = ''
  private uploadAddr2: string = ''
  public openDialog(key, val) {
    const apiAddr = getConfigByName('apiAddr')
    this.uploadAddr = apiAddr + '/tool/uploadImg'
    this.uploadAddr2 = apiAddr
    if (key == '新增') {
      this.fileListAll = []
      this.formData = {}
      // this.hideUpload = false
      this.dialogAddorEdit = true
      // this.imgbase64str = ''
      this.fileList = []
      this.titles = key
    } else if (key == '编辑') {
      console.log('编辑', val)
      // warehouseImage

      this.dialogAddorEdit = true
      this.titles = key
      this.id = val.id
      this.formData = JSON.parse(JSON.stringify(val))
      this.fileList = []
      this.fileListAll = []



//重要,如果回显的图片没有token用这个,用来回显
      // 用来一开始显示
      val.warehouseImage.forEach((item) => {
        axios.get(item, { responseType: 'blob', headers: { token: this.$store.state.system.token } }).then((res) => {
          let x = URL.createObjectURL(res.data)
          this.fileList.push({ url: x })
        })





        let arr = item.split('/')
        this.fileListAll.push(arr[arr.length - 1])
        // this.fileList.push({ url: item })
      })
    }
  }




  // 自定义上传 重要
  private imgbase64str: string = ''
  private async overridehttprequest(e) {
    this.imgbase64str = await this.blobToBase64(e.file)
    this.fileList.push({
      name: e.file.name,
      url: this.imgbase64str
    })
  }




  // 转64
  private blobToBase64(blob): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      let fileReader = new FileReader()
      fileReader.onload = (e) => {
        resolve(e.target.result)
      }
      fileReader.readAsDataURL(blob)
      fileReader.onerror = () => {
        reject(new Error('blobToBase64 error'))
      }
    })
  }



  private handleExceed() {
    //提示最多只能上传3个
    this.$message.warning('图片数量最多为6张!')
  }



  // 用于隐藏
  private hideUpload: boolean = false
  private limitCount: Number = 1



  // 放图片
  private fileList: any[] = []
  private dialogVisible: boolean = false



  // 上传成功
  private onSuccess(res, file) {
    if (this.titles == '编辑') {
      let resurl = res.data.imgUrl
      this.fileListAll.push(resurl)
      console.log('tupianaa', this.fileListAll)
    } else {
      let resurl = res.data.imgUrl
      this.fileListAll.push(resurl)
      console.log('上传成功后得图片', this.fileListAll)
    }
  }



  // 文件删除时
  private async handleRemove(file, fileList) {
    console.log(file)
    this.fileList = fileList
    let res = await contractDeleteImages({ imgName: file.name })
    if (this.titles == '新增') {
      this.fileListAll = this.fileListAll.filter((item) => {
        return item != file.response.data.imgUrl
      })
    } else {
      console.log(file)
      if (file.response) {
        this.fileListAll = this.fileListAll.filter((item) => {
          return item != file.response.data.imgUrl
        })
      } else {
        let arr = file.url.split('/')
        console.log('filelistall得数据,item', arr[arr.length - 1])

        this.fileListAll = this.fileListAll.filter((item) => {
          return item != arr[arr.length - 1]
        })
      }
    }
  }



  //文件状态改变的钩子
  private handleIntroduceUploadHide(file, fileList) {}



  // 删除前
  private beforeRemove(file, fileList) {}
  private dialogImageUrl: string = ''



  // 点击文件列表中已上传的文件时的钩子
  private handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url
    this.dialogVisible = true
  }



  // 上传图片之前校验
  beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpg'
    const isJPEG = file.type === 'image/jpeg'
    const isPNG = file.type === 'image/png'

    if (!isPNG && !isJPG && !isJPEG) {
      this.$message.error('只能上传jpg,png,jpeg格式的图片!')
    }
    return isPNG || isJPG || isJPEG
  }


  private fileListAll: any[] = []

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值