vue上传图片到后端,vue图片上传并预览
这篇文章主要介绍了某视频剪辑软件如何预览后端传来的二进制图片，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
vue预览后端传来的二进制图片1.新建一个对话框2.下载方法3.转码方法某视频剪辑软件实现文件预览功能的前端预览文件的前端第一种方法第二种方法
vue预览后端传来的二进制图片
1.新建一个对话框
用来显示图片
El-dialog title=“”:可见。sync= img对话框宽度= 70%
img :src=src alt=/
/el-dialog
2.下载方法
可以将请求替换成爱可信
下载（第行){
这个请求({
URL:基本URL /文件/下载，
方法： post ，
数据：行，
responseType: arraybuffer //这个响应类型必须要写
}).然后(res={
//console.log(res) //二进制文件打印出来是乱码
这个。src= data:image/JPEG；base64， this.arrayBufferToBase64(res)
this.imgdialog=true
}).接住(错误={
console.log(错误)
})
},
3.转码方法
arrayBufferToBase64(缓冲区){
var binary=
var bytes=new Uint8Array(缓冲区)
var len=bytes.byteLength
for(var I=0；我leni ) {
二进制=字符串。from charcode(字节[I])
}
返回window.btoa(二进制)
}
vue实现文件预览功能的前端
预览文件的前端
省略点击按钮点击触发showdialogview()方法的代码
第一种方法
先在模板中加入一个投入框，绑定一个字符串类型的变量
写showdialogview()方法
调用后台的方法，如果返回的不是空（后台返回的数据是一行一行返回的),就使用为循环，添加到变量中去。
模板
div class=内容
！-文件预览-
el-dialog title=数据预览：可见。sync= dialogvisibleview
El-input type= textarea :rows= 10 placeholder= v-model= dataview
/el-input
/el-dialog
/div
/模板
脚本
导入美国石油学会(American Petroleum Institute)自././api/api
从" jquery "导入$ s；
从" axios "导入axios
导出默认值{
名称："数据文件",
注入：[reload]，
data(){
返回{
dialogvisibleview: false，//文件预览
数据视图：""
}
},
方法：{
//预览文件
showdialogview(id) {
这个。dataview=
var dataView=新表单数据
//var num=20；
dataView.append(id ，id)；
api.getDataDetail(数据视图)。然后((response)=response.json())。然后((数据)={
如果（数据！=null){
this.dialogvisibleview=！this.dialogvisibleview
//alert(数据。数据[0])；
for(var I=0；I=数据。数据。长度-1；i ){
这个。数据视图=数据。data[I] \ n ；
}
}
});
}
},
已创建：函数(){
控制台。日志( c已处理钩子执行.);
}
}
/脚本
第二种方法
可以在对话框中加入一个桌子标签，在在需要分行下载处加上标签中使用虚拟超文本标记语言绑定变量，这样，在字符串中的标签可以展示出来
因为后台给的接口返回的数据是数组中的一个下标对应的一行数据，把每一行的数据拆分成字符串数组，然后放在单元格中，这样展示出来比较整齐，还可以添加样式。
模板
div class=内容
！-预览的模态框-
el-dialog title=文件内容预览：可见。sync=预览可见 modal-append-to-body= false append-to-body= true style= height:100%；宽度=80%
p style=color:red 若可视化，请选择数值列/p
div id= modal content style= height:600 px；溢出：滚动；溢出-x:auto；溢出-y:自动
table id= box-table style= border-collapse:collapse；高度：60px
tbody id= table _ body v-html=数据文件视图/tbody/table
/div
/el-dialog
/div
/模板
脚本
导入美国石油学会(American Petroleum Institute)自././api/api
从" jquery "导入$ s；
从" axios "导入axios
导出默认值{
名称："数据文件",
注入：[reload]，
data(){
返回{
previewVisible:false，//预览模态框的
数据文件视图：,//预览的表格
}
},
方法：{
//打开预览的模态框
打开预览(id){
this.previewVisible=true
这个。查看数据(id)；
},
//在后台查询预览
视图数据(fid) {
这个。数据文件视图=" "；
var dataView=新表单数据
dataView.append(id ，FID)；
api.getDataDetail(数据视图)。然后((response)=response.json())。然后((数据)={
var viewDataString= tr
var数据数组=((字符串)(数据。数据[0]).拆分(,);
for(var I=0；idataArray.lengthi ){
view datastring=view datastring TD style= text-align:center；宽度：10% input type= radio name= table header value= I @ click= f1()//TD ；
}
view datastring=view datastring /trtr style= border-color:# 1 EB 8 f 7；边框-底部-样式：实心；边框宽度：1px“”；
for(var I=0；idataArray.lengthi ){
view datastring=view datastring th style= text-align:center；宽度：10% 数据数组[I]/th ；
}
view datastring=view datastring /tr ；
控制台。日志(数据。数据。长度)；
for(var x=1；扩展数据。数据。长度；x ){
var数据数组=((字符串)(数据。data[x]).拆分(,);
view datastring=view datastring tr ；
for(var I=0；idataArray.lengthi ){
view datastring=view datastring TD style= text-align:center；宽度：15% 数据数组[I]/TD ；
}
view datastring=view datastring /tr ；
}
这个。数据文件view=view datastring
控制台。日志(这个。数据文件视图)；
});
}
},
已创建：函数(){
控制台。日志( c已处理钩子执行.);
}
}
/脚本
缺点：使用v-html，即使标签在浏览器中展示出来，但是里面的方法不可以使用，里面的方法失效。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。