Vue图片上传,vue上传图片到后端
本文主要介绍Vue项目中html5图片的上传，通过示例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
图例1。选择图片2。预览图片2.1添加图片预览代码的两种方法比较3。作物图片4。上传选择图片-预览图片-裁剪图片-上传图片
我将通过例子浏览图片。接下来，我将详细介绍每个步骤的具体实现。
图例
1.选择图片
选图有什么好讲的？就一个输入[type=file]，然后点开？确实如此。但是，如果我们想要更加友好，例如，我们需要过滤掉非图像文件，或者只允许从相机中拍摄图片等。但是我们还是需要一些简单的配置。
让我们先来看看最简单的选择文件：
输入类型=文件/
您可以查看上面非图像类型的文件，这不是我们想要的结果。毕竟我们只想要图像类型。这可以通过accept属性实现，如下所示：
输入类型=file accept=image/*
这样就可以过滤掉非图片类型。但是可能图片类型太多，有些可能服务器不支持。所以，如果要保守一点，只允许jpg和png类型。你可以这样写：
输入类型=file accept=image/jpg，image/jpeg，image/png
或者像这样
输入类型=文件接受=。jpg，jpeg， jpg
好了，过滤非图像的需求解决了。然而，有时该产品也要求您只能从相机中收集图片。比如你需要上传自己的身份证照片，防止别人的身份证从网上上传。那么capture属性就派上用场了：
输入类型=文件接受=图像/* 捕获
这时候你不能从文件系统中选择照片，只能从相机中收集。在这一点上，它可能感觉很完美，但仍然有一个问题。可能会有一些异常的产品需要默认开启前置摄像头来采集图片。比如他们只是想要你的自拍照片。默认情况下，Capture调用后置摄像头。启用默认前置摄像头以设置capture=“user”，如下所示：
输入类型=文件接受=图像/* 捕获=用户
好了，选图就这么多了。有一点需要注意的是，有些配置可能会有一些兼容性问题，所以你需要在不同的机型上进行测试，看看效果。
先说预览图的实现。
2.预览图片
如果不使用图片预览，点击上传图片后无法查看。比如如下图：我又换了图片，图片路径变了，但图片没变。
2.1添加图片预览代码
当图片改变时，您可以预览它。
1:源代码：使用URL.createObjectURL预览
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
风格
img {
宽度：300px
高度：200px
}
/风格
/头
身体
form action= method=get
输入id= input file type= file accept= image/*
Img=。/301571.jpg id=预览图片 alt=图片预览 title=生活在风暴中.
/表单
！-图片预览-
脚本
const $=document . getelementbyid . bind(document)；
const $ input file=$( input file )；
const $ preview image=$( preview image )；
$ inputfile . addevent listener( change ，function() {
const file=this . files[0]；
$previewImage.src=file？URL.createObjectURL(文件):“”；
}，这个)；
/脚本
/body
/html
2.源代码：用FileReader预览
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
风格
img {
宽度：300px
高度：200px
}
/风格
/头
身体
form action= method=get
输入id=输入文件 type=文件 accept= image/*
img src= ./301571 .jpg id=预览图像 alt=图片预览
/表单
！-图片预览-
脚本
const $=文档。getelementbyid。bind(文档)；
const $输入文件=$(输入文件)；
const $预览图像=$(预览图像)；
$ inputfile。addevent侦听器( change ，function() {
const file=this。文件[0]；
const reader=new FileReader()；
reader.addEventListener(load ，function() {
$预览图像。src=读者。结果；
},假);
如果（文件){
reader.readAsDataURL(文件);
}
},假)
/脚本
/body
/html
预览图片总结：
两种方法的对比
我个人更加倾向于使用URL.createObjectURL()。主要原先它的应用程序接口简洁，同步读取，并且他返回的是一个URL，比档案员返回的base64更加精简。兼容性上，两者都差不多，都是在陆军部(陆军部)的阶段。性能上的对比，在铬上，选择了一张2M的图片，URL.createObjectURL()用时是0 , 而字符输入流用时20毫秒左右。 0 感觉不太合理，虽然这个方法立刻就会返回一个URL，但是我猜测实际上这个统一资源定位器指定的内容还没有生成好，应该是异步生成的，然后才渲染出来的。所以并没有很好的办法来对比他们的性能。
3.裁剪图片
关于图片的裁剪，很自然的会想到使用画布，确实是要通过画布，但是如果全部我们自己来实现，可能需要做比较多的工作，所以为了省力，我们可以站在巨人的肩膀上。比较优秀的图片裁剪库是cropperjs，该库可以对图片进行缩放、移动和旋转。随后会持续更新canvas,(我也在学.永远保持谦逊，人外人天外天，拒绝凡尔赛)
cropperjs的详细配置这里就不展开了，需要的可以自己去看文档就好。下面我们就以这个库为基础，实现一个裁剪人脸的例子：
源码：当然这个只是简单的写下，为了写博客在电脑操作小伙伴要自行查看下移动端兼容
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
link rel=样式表 href= https://cdnjs。云层耀斑。com/Ajax/libs/cropper js/1。5 .6/cropper。量滴 CSS
script src= https://cdnjs。云层耀斑。com/Ajax/libs/cropper js/1。5 .6/cropper。量滴js /脚本
风格。预览-图像，裁剪者-图像{
最大宽度：100%;
}。收割者
显示：无；
位置：绝对；
top:0；
右：0;
底部：0;
左：0;
背景：# ccc
字体大小：0.27雷姆；
文本对齐：居中；
}。内部{
身高：100%;
显示器：flex
伸缩方向：列；
对齐-内容：居中；
对齐-项目：居中；
}。面容器{
位置：相对；
宽度：320像素
高度：320像素
边距：50px自动；
}。cropper-modal {
背景：URL( https://好的。166 .net/gameyw-misc/OPD/壁球/2019 10 28/152551-m 37 snfsyu 1。png’)中心无重复；
背景尺寸：100% 100%;
不透明度：1;
}。cropper-bg {
背景：无；
}。裁剪器-查看框{
不透明度：0;
}。提示{
字体大小：16px
}。工具栏{
显示器：flex
对齐-内容：居中；
边距：50px 0；
}。btn {
宽度：150像素
行高：40px
字体大小：20px
文本对齐：居中；
颜色：# fff
背景：# 007fff
}
/风格
/头
身体
form name= input action= html _ form _ action。PHP method= get
输入id=输入文件 type=文件 accept= image/*
img class= preview-image id= preview image src= alt=
！-庄稼裁剪框-
div class=cropper id=cropper
div class=inner
div class=face-container
img class= cropper-image id= cropperImage
/div
div class=tips 请将面部区域置于人脸框架内/div
div class=工具栏
div class=btn id=确认确认/div
/div
/div
/div
/表单
/body
脚本
const $=文档。getelementbyid。bind(文档)；
const $ cropper=$( cropper )；
const $输入文件=$(输入文件)；
const $预览图像=$(预览图像)；
const $ cropperImage=$( cropperImage )；
const $confirmBtn=$(confirm )
设cropperInstance=null
//选择图片后，显示图片裁剪框
$ inputfile。addevent侦听器( change ，function() {
const file=this。文件[0]；
如果(!文件)返回；
$ cropperimage。src=URL。createobjecturl(文件)；
showCropper()；
},假);
//点击确认按钮，将裁剪好的图片放到图片标签显示。
$确认BTN。addevent侦听器( click ，function() {
const URL=cropperinstance。getcroppedcanvas().toda aurl( image/JPEG ，1.0)；
$克罗珀。风格。display= none
$ previewImage.src=url
},假);
函数showCropper() {
$克罗珀。风格。display= block
cropperInstance cropperInstance。destroy()；
cropperInstance=新裁剪者(cropperImage，{
viewMode: 1，
比例：1,
autoCropArea: 1，
拖动模式：移动，
导游：假的，
推荐理由：假的，
cropBoxMovable: false，
cropBoxResizable: false
});
}
/脚本
/html
4.上传
前面的操作已经完成了图片上传前的准备，包括选择图片、预览图片、编辑图片等，那接下来就可以上传图片了。上面的例子中，使用了cropperinstance。getcroppedcanvas()方法来获取到对应的帆布对象。有了帆布对象就好办了，因为canvas.toBlob()方法可以取得相应的一滴对象，然后，我们就可以把这个一滴对象添加到FromData进行无刷新的提交了。大概的代码如下：
变更(e) {
//1.手写的投入需要一个对象将本地图片转换为对应的格式来上传
let formData=new formData()；
//2.电子目标文件就是选中的图片的一个
formData.append(file ，e . target。文件[0])；
//3.将上传这个对象传给修改头像的接口
updateImg(formData).然后((res)={
//4.此时已经传到修改头像接口了
//4.1 传到修改头像的接口后，在更新接口中再次更新头像属性
更新({ avatar:RES . data。path })；
//存到本地//信息是本地存储点击头像获取的个人信息，在此页面初始调用本地存储数据，
//这里赋值信息对象，因为上面渲染头像用的是本地，所以（修改后端图片路径，重新调用后端更新接口后),
//还要重新赋值本地存储，才能后端变化。本地页面，因为是点击头像进入修改页，才存储的数据，不会随后端更新，
//所以还要重新赋值本地存储
这个。信息。头像=RES . data。路径；
本地存储。setitem( userInfo-Avatar)，JSON。stringify(这个。info))；
this.show2=false
});
},
浪哥小贴士：如果在移动端，有的手机会检测自动校正角度，导致有些角度不对可以使用半铸钢钢性铸铁(铸造半钢)的转换：旋转(-90度)顺时针旋转90 度抵消掉这个角度就好。
以上就是本文关于Vue项目实现html5图片上传的示例代码。更多相关Vue html5图片上传内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。