前端通过http获取图片流并转存

这篇具有很好参考价值的文章主要介绍了前端通过http获取图片流并转存。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.场景

        昨天公司里面提了一个需求,将竞争对手的sku通过一些手段导入我们自己的数据库,普通数据比较好搞,但是图片这种静态资源我们只能获取到一个url,所以需要进行一次转存。

二.实现

        这里有两个思路,一个是交给后端来做这个事情,但是后端做的话,会暴露我们自己的后端,给对手留下痕迹。第二个就是前端来做,每次使用不同的电脑访问网站来做这个数据转存的操作就给追踪提高难度,因为对方也不知道我们是否是正常的访问资源。

        最终选择了前端来做。第一步,通过http获取到该网站的数据,模拟登录获取token,截取下来他的商品列表数据。这个就不贴代码了,也可以通过不使用代码的方式来实现。

        第二步。将获取到的商品数据里面的图片读取出来并上传

/** 
* @descrip 将blob对象转换成file对象
* @param {Blob} blob  需要转换成文件的blob对象
* @param {string} fileName 文件名
* @param {string} fileType 文件类型
* @return {Promise} 返回一个promise对象,即处理之后的文件对象
**/
const transToFile = async(blob, fileName, fileType) => {
    return new window.File([blob], fileName, { type: fileType })
}

/** 
* @descrip 将互联网上面的图片读取成buffer并且转存至私有的服务器
* @param {string} url  需要转换成的图片的公网地址 eg:https://image.xxx.com/uploads/image/product/62b2babba1c9c_thumb.jpg
* @return {Promise} 返回一个promise对象,即上传成功之后的图片url
**/
const getFileStreamAndUpload = async (url) => {
    return new Promise((resolve, reject) => {
        let suffix = "jpg"
        let fileNameArr = url.split("/")
        let fileName = fileNameArr[fileNameArr.length - 1]
        if (url.split(".").length > 1) {
            suffix = url.split(".")[1]
        }
        // 通过axios读取图片时一定要加上这个responseType,不然是乱码
        axios.get(url, {responseType: 'arraybuffer'}).then(async res => {
            // 构建blob对象
            const blob = new Blob([res.data], { type: `image/${suffix};charset=utf-8` })
            let getFile = transToFile(blob, fileName, `image/${suffix}`)
            getFile.then(async res1 => {
                // 通过FormData将文件提交给后端
                let formData = new FormData()
                formData.append('file', res1)
                formData.append('folderName', "fsImage")
                let res2 = await bar.uploadFile(formData)
                if (res2.code == 200) {
                    resolve(res2.data)
                } else {
                    reject(new Error("图片上传失败"))
                }
            })
        })
    })
}
             // 获取数据成功之后
            const loadingInstance = ElLoading.service({ fullscreen: true })
            // 这里的res.data.data 就是竞争对手的商品列表数据
            let fsData = res.data.data
            for (let i = 0; i < fsData.length; i++) {
                const item = fsData[i];
            // 这里可能会出现跨域请求资源的情况所以使用代理将真实的域名代理到本地的开发服务器上面
                item.productUrl = await getFileStreamAndUpload(item.thumb_path.replace("https://image.xxx.com", "/fsimgapi"))
            }
            console.log(fsData);
            loadingInstance.close()
            ElMessage.success("数据转移成功")

 效果图,这里转换完成之后就直接输出了一个转换后的数组出来,后续根据业务需求将这个数组提交给后端即可。

 http接收图片,前端技术分享,前端,http,javascript

 http接收图片,前端技术分享,前端,http,javascript

三.总结 

其实这种功能最好还是由后端或者nodejs来做,纯前端不可避免的会遇到跨域问题。主要的技术要点就是将网络上面的静态资源通过读取成流的形式放在浏览器缓存里面,然后利用Blob对象跟File对象之间的互相转换,就可以得到一个个的文件对象了,最后通过FormData将数据上传即可。文章来源地址https://www.toymoban.com/news/detail-623663.html

到了这里,关于前端通过http获取图片流并转存的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • java 通过HTTP接收json

    一: json接收类, 第一个接口为直接传参接收 第二个接口接收json字符串 可以写个HTTP测试类调用测试,也可以postman测试调用,实例方法贴到下面 二:HTTP工具类 三:Test测试类

    2024年02月16日
    浏览(37)
  • http发送和接收图片json文件

    1、先将图片转换为base64格式 2、将数据以json格式进行发送 其中 ImgInfo 类为: 上述代码中json数据有五个部分:image为图片数据,level是告警等级,rtsp为数据流地址,type是算法类型,label是算法标签等,所以数据发送为这五个内容。 HttpServer.cpp如下:   HttpServer.h如下: httpu

    2024年02月07日
    浏览(62)
  • 用python通过http实现文件传输,分为发送端和接收端

    要使用Python通过HTTP实现文件传输,可以使用Python的 requests 库来发送和接收HTTP请求。以下是一个示例代码,其中包括发送端和接收端的实现。 发送端: 接收端: 在这个示例中,发送端使用 requests.post() 方法发送文件到指定的URL。接收端使用Flask框架创建一个HTTP服务器,并在

    2024年02月15日
    浏览(45)
  • 后端返回图片,前端接收并显示的解决方案

    后端通过二进制流的形式,写入response中 controller层 service层 axios接受数据时,responseType 默认返回数据类型是 json,必须将其改为返回数据类型 blob。否则axois无法正确解析数据。 这里的http.request是对axios的封装,把他当作axios用就行 vue界面渲染 后端接口,最好不要有返回值,

    2024年02月12日
    浏览(55)
  • python-自动化篇-办公-将PDF文件转存为图片

    因工作中的某些奇葩要求,需要将PDF文件的每页内容转存成按顺序编号的图片。用第三方软件或者在线转换也可以,但批量操作还是Python方便,所谓搞定办公自动化,Python出山,一统天下;Python出征,寸草不生~ O(∩_∩)O 不过这个需要用到 PyMuPDF 库,电脑运行cmd,输入“pip

    2024年02月19日
    浏览(56)
  • Base64加密后的数据通过http传输后,后台接收到的数据会出现空格的问题分析

    最近在项目中使用fetch发请求,开始时选择自己将post请求的body参数使用进行拼接,但是在发送请求时在控制台显示的参数,有的会存在传递的+变成空格的情况,百思不得其解。 查阅资料后发现可能是http传参时urlencoded的问题(因为我的post请求的content-Type是application/x-www-for

    2024年02月03日
    浏览(70)
  • 微信小程序怎么通过图片链接获取图片宽高比(适合在下载图片前获取宽高比)

    在微信小程序中,可以通过 wx.getImageInfo 来获取图片链接的宽高信息: getImageInfo 是一个异步API,它会去下载图片并获取到图片的宽高信息。 主要步骤: 1. 通过 wx.getImageInfo 获取图片宽高 2. 在 success 回调中可以拿到 width 和 height 3. 将 width 除以 height 即可计算出宽高比 ratio 注意: -

    2024年02月03日
    浏览(76)
  • RTPEngine 通过 HTTP 获取指标的方式

    RTPEngine 是常用的媒体代理服务器,通常被集成到 SIP 代理服务器中以减小代理服务器媒体传输的压力,其架构如下图所示。这种使用方式相当于将 RTPEngine 隐藏在 SIP 代理服务器后面,我们虽然可以借助 SIP 代理服务器提供的相关接口有限操作 RTPEngine,但是对 RTPEngine 实例的相

    2024年02月10日
    浏览(39)
  • 【Java】如何通过一次请求获取多张图片

    背景:一次请求响应一张图片 这是我们熟练的业务,就是用户访问我们编写的接口,后端服务就响应一张图片给网页,也就是一个url对应的就是一个图片资源 下面是具体的业务代码和注释 编写完这些代码后运行后端服务,然后我们在网页上访问这个接口  图片成功的在网页

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包