前言经常需要图片上传。 用户选择上传图像后，在界面上运行显示，要求在单击保存或确定按钮时上传到服务器。
不说话直接上代码
div class=' upload-con ' input type=' file ' @ change=' uploadimg ' ref=' uploadfile ' name=' file ' style=' width cursor: pointer； 位置： absolute； left: 0； top: 0； opacity : ' img : src=' imgurl ' alt=' ' style=' width 3360100 %； height: 100%； 位置： absolute； left: 120px；' /div如大家所知，直接写的行内很多。
效果如下图所示。
这张背景图是UI的姐姐做的，在. upload-con’的背景中
不言而喻，直接乘坐js代码：
uploadImg () {//input的更改事件this.upload msg=this.$ refs.uploadfile.files [0]； //文件流this.imgurl=this.getimg (this.upload msg )； //图像地址}，getimg(file ) { let url=' '； if(window.createobjectURL！==undefined (//basicurl=window.createobject URL (file ) )； }elseif(window.URL！==undefined(//Mozilla(Firefox ) URL=window.URL.createobjectURL ) file； }elseif(window.WebKitURL！==undefined (//webkitorchromeurl=window.WebKit URL.createobject URL (file ) )； }返回URL； }这将使本地上载的图像显示在界面中，存在于定义的uploadMsg变量中，图像地址存在于imgUrl变量中。 当然，上述方法同样适用后台返回二进制流，前端 img 标签的显示图片问题
效果如下。
那么，这样就完美解决了图像上传显示的问题，以及在后台返回二进制流显示的问题
转载需要标记！
请多关照！