vue页面转图片,vue实现图片上传到服务器

　　本文主要介绍了vue将图像路径转换为二进制文件流的实现，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

图片路径转二进制文件流(binary)

　　在vue项目中，需要将本地图片或者前端生成的图片发送回后端，然后需要将图片路径转换成二进制文件流，在参数中显示。这时候就需要转换图片路径了。

图片路径转换为Base64

　　imageUrlToBase64(imageUrl) {

　　Let=new image()//一定要设为let，否则图片无法显示。

　　image . set attribute( cross origin ， anonymous )//解决跨域问题

　　image . src=imageUrl v= math . random()

　　image.onload=()={

　　var canvas=document . createelement( canvas )

　　画布宽度=图像宽度

　　canvas.height=image.height

　　var context=canvas . get context( 2d )

　　context.drawImage(image，0，0，image.width，image.height)

　　var质量=0.8

　　var URL=canvas . toDataUrl( image/jpeg ，quality)//使用toda taurl将图片转换成JPEG格式，不要将图片压缩成png，因为base64压缩成png后的字符串可能会比转换前长！

　　this.base64toFile文件(数据URL)

　　}

Base64转换为二进制文件流(binary)

　　base64toFile(数据url，文件名=文件){

　　let arr=dataurl.split(，)

　　设mime=arr[0]。匹配(/:(。*?);/)[1]

　　let suffix=mime.split(/)[1]

　　设bstr=atob(arr[1])

　　设n=bstr.length

　　设u8arr=新Uint8Array(n)

　　while (n - ) {

　　u8arr[n]=bstr.charCodeAt(n)

　　}

　　let file=新文件([u8arr]，` ${filename}。${suffix} `，{

　　类型：mime

　　})

　　console.log(文件)

　　}

下载二进制流文件

　　通常前端下载文件有两种方式。一种是后台提供一个URL，然后用window.open(URL)下载；另一种是在后台直接返回文件的二进制内容，然后在前端转换下载。下面是第二种实现方法。

Blob、ajax(axios)

　　这就是在mdn上引入Blob方式：

　　Blob表示不可变的原始数据类文件对象。Blob不一定以JavaScript本地格式表示数据。

　　特定用途

　　axios({

　　方法： post ，

　　URL:“/export”，

　　})。然后(res={

　　//假设数据是返回的二进制数据

　　常量数据=res.data

　　常量url=window。URL.createObjectURL(新Blob([数据]，{ type: application/vnd . openxml formats-office document . spreadsheetml . sheet }))

　　const a=document . createelement( a )

　　a.href=url

　　a .单击()

　　//const link=document . createelement( a )

　　//link.style.display=none

　　//link.href=url

　　//link.setAttribute(download ， excel.xlsx )

　　//document.body.appendChild(链接)

　　//link.click()

　　//document.body.removeChild(链接)

　　})

　　下载的文件，一堆乱码……肯定有问题。

　　最后发现参数responseType有问题，它表示服务器响应的数据类型。由于后台返回的是二进制数据，我们只好将其设置为arraybuffer，然后看结果是否正确。