通过图片url获取file对象

最新推荐文章于 2024-07-25 12:12:14 发布

PoPo丶K

最新推荐文章于 2024-07-25 12:12:14 发布

阅读量1.7k

点赞数

文章标签：前端 js

本文链接：https://blog.csdn.net/qq_39417037/article/details/120869432

版权

这段代码展示了如何通过xhr从指定url获取图片，并将其转换为file对象。首先，定义了一个chooseStaticImg函数，它调用getImageFileFromUrl方法来处理。getImageFileFromUrl方法设置xhr请求以GET方式获取图片，设置响应类型为blob，当请求成功时，将响应数据转换为file对象并通过回调函数返回。

摘要由CSDN通过智能技术生成

// 选择默认图片
    chooseStaticImg(imageUrl) {
      this.getImageFileFromUrl(imageUrl, '图片.png', function(file) {
        this.file = file //获取file对象
      })
    },
    // 根据路径返回file
    getImageFileFromUrl(url, imageName, callback) {
      // imageName一定要带上后缀
      var blob = null
      var xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.setRequestHeader('Accept', 'image/jpeg')
      xhr.responseType = 'blob'
      xhr.onload = () => {
        if (xhr.status === 200) {
          blob = xhr.response
          let imgFile = new File([blob], imageName, {type: 'image/jpeg'})
          console.log(imgFile)
          callback.call(this, imgFile)
        }
      }
      xhr.send()
    }