vue图片上传并预览,vue上传文件和后端upload
主要介绍Vue UpLoad上传预览和删除图片的实践，通过实例代码详细介绍，具有一定的参考价值。感兴趣的朋友可以参考一下。
1.使用vue Element完成图片上传、点预览、添加和删除功能，如下图所示：
2.首先，我们将这段代码引入组件，每个属性的用法也放在这里：
El-上传
class=上传-演示
action=“”//引号内填充要上传图片的地址，如果使用接口，图片的接口与公共接口地址拼接。
:on-preview=handlePreview//图片上传后点击触发(hook功能)
:on-remove= handle move //点击右上角的X触发的挂钩功能。
:on-success=handleSuccess//成功上传挂钩函数。
:file-list=fileList//上载文件的列表
List-type=picture//上传的文件类型有三个参数，分别是text/picture/picture-card，分别是text类型、picture类型和card类型。个人认为还是选择第二种比较好
:headers=headerObj//上传图像时，需要请求标头。我们可以定义一个变量，并将其设置为获取令牌信息，如以下代码所示：
El-button size= small type= primary 点击上传/el-button。
div slot= tip class= El-upload _ _ tip 只能上传jpg/png文件，大小不超过500kb/div。
/El-上传
//保存令牌的变量
headerObj: {
authorization:window . local storage . getitem( token )，
},
3.接下来是它的on-preview属性，我们可以用它来预览图像。
要先设置图片预览框：
el对话
Title=图片预览/上面的标题
:visible . sync= PreviewDialogVisible //控制隐藏变量的显示
Width=50%//项目符号框宽度的比率
//img标签中的src属性接受点击预览时传递的图像地址。
img:src= picPreviewPath alt= class= preview img /
/el-dialog
然后进行逻辑运算。
//处理图片预览
HandlePreview(file) {//会得到一个参数，是返回图片的一些信息，主要是图片的url。
this . picpreviewpath=file . response . data . URL；//将url参数赋给此变量
this . previewdialogvisible=true；//让项目符号框再次显示
},
3.然后点击删除图像。此时，使用on-remove属性。
//处理删除图片的操作
handleRemove(文件){
//1.获取要删除的图片的临时路径。
const file path=file . response . data . tmp _ path；
//2.从pics数组中，找到对应于图片的索引值。
const I=this . addform . pics . find index((x)=x . pic===file path)；
//3.调用splice方法移除图片信息。
this.addForm.pics.splice(i，1)；
},
4.如果前面所有的功能都已经实现了，那么现在你已经成功了一半。如果项目需要提交一个添加的图片，就使用它的on-success属性。
//侦听成功的图像上传事件。
handleSuccess(响应){
//1.拼接得到图片信息对象的临时路径。
const picInfo={ pic:response . data . tmp _ path }；
//2.将图片信息对象推入pics数组。
this . addform . pics . push(picInfo)；
},
5.文章提示：
1.不要忘记在需要设置为动态属性的属性中添加v-bind。
2.注册数据中要绑定的变量
关于Vue上传中上传预览和删除图片的这篇文章到此为止。关于上传预览和在Vue上传中删除图片的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。