网站内容管理系统上传图片(图片上传(基于vue)的上传图片处理方法详解!)
优采云 发布时间: 2021-08-29 01:20网站内容管理系统上传图片(图片上传(基于vue)的上传图片处理方法详解!)
图片上传(基于vue)
我相信上传图片是所有系统的必备功能。上班的第一个管理系统卡在上传图片功能一整天了。
当时使用的elementUI组件,但由于风格和设计风格差异较大,对原文的理解比较好,所以使用了原图上传功能。
路上的菜鸟,希望大家多多指教。
参考地址:
前端网页文件上传一般是通过使用来实现的。
每当该标签出现在 HTML 文档中时,都会创建一个 FileUpload 对象。
2. 该标签收录一个用于输入文件名的文本输入字段,以及一个用于打开文件选择对话框以图形方式选择文件的按钮。这个标签的value属性保存了用户指定的文件名。名字。
3.Multi-selection:标签可以通过添加多个属性来支持多选;如果选择了多个文件,则此值表示第一个选定文件的路径。 JavaScript 可以通过 Input File 路径的 FileList 属性获取另一个。
4.File 信息:可以通过 input.files 属性返回——返回值是一个 FileList 对象,它是一个收录许多 File 文件的列表,该列表收录文件的名称、类型、大小等属性图像。
5.Restrict file types:可以使用input的accept属性,accept属性接受逗号分隔的MIME类型字符串。如:accept="image/png, image/jpeg" 或 accept=".png, .jpg, .jpeg" — PNG/JPEG
6.选择文件会触发 input onchange 事件;
7.Upload:上传文件前,使用FileReader对象读取指定文件的文件,将文件转换为二进制字符串,并将xhr对象的overrideMimeType属性设置为text/plain; charset=x-user-defined -binary,在后台接收到二进制文件后进行最终处理。 (注意:编辑器使用的是 FormData 对象)
①:风格的实现
代码:
<img v-span style="color:#0000ff;"if/span=span style="color:#800000;""/spanspan style="color:#800000;"imageUrl/spanspan style="color:#800000;""/span :src=span style="color:#800000;""/spanspan style="color:#800000;"imageUrl/spanspan style="color:#800000;""/span style=span style="color:#800000;""/spanspan style="color:#800000;"position:absolute; top:0; left:0; height:80px; width:80px/spanspan style="color:#800000;""/span></img>
图片格式为JPG/JPEG/PNG,图片大小不超过2M
{{msg2}}
首先将设计图所需的背景图片插入到表单标签中。这时候背景图是不可见的,因为根据代码,input标签定位在form上,img标签定位在form下的input上,所以我们需要将input标签的背景色设为设置为transparent opacity:0,这样当没有上传时,页面显示表单的背景图片。当确定要上传的图片时,使用img标签显示上传的本地图片。
注意:也可以将两者都绑定到img标签,绑定img的src双向,根据需要实时更新src。
②:当用户确认要上传的图片时,页面应该在本地显示要上传的图片
注意:input.files属性返回——返回值是一个FileList对象,这个对象是一个收录很多File文件的列表,列表收录图片的名称、类型、大小等属性。
HTML 代码:
首先将“onchange”事件绑定到输入标签。当确定要选择的图片时,会触发creatUrl($event),然后通过event.target.files[0]
找到图片信息
创建本地图片URL,实现属性URL.createObjectURL,然后将创建的imageUrl绑定到标签img的src,OK! ! ! !
也可以使用 event.target.files[0].size, event.target.files[0].type 进行判断,限制用户上传图片的大小和类型
JS代码:
let imageUrl=URL.createObjectURL( event.target.files[0] )
③:上传图片到后台
FormData 对象可用于组装一组键/值对,以便使用 XMLHttpRequest 发送请求。它可以更灵活方便地发送表单数据,因为它可以独立于表单使用。表单的编码类型设置为multipart/form-data,表单必须绑定vue的ref属性,方便获取表单对象。
代码:
步骤:将onclick事件绑定到提交按钮,提交方法
在submit方法中,使用vue的this.$refs属性获取表单对象,var fd =new FormData(this.$refs.form)
使用axios向后台发送数据fd,后台会返回这张图片的fileName
然后调用上传表单接口,将返回的fileName和表单中填写的信息一起发送到后端。此时图片上传成功。
图片渲染时,首先请求渲染接口获取图片的在线imgName,然后通过img的src拼接图片的在线地址,代码如下:
<img :src=span style="color:#800000;""/spanspan style="color:#800000;"`http://***.***.***.***:8080/product/getFtpImage.do?filePath=`+item.imgName/spanspan style="color:#800000;""/span style=span style="color:#800000;""/spanspan style="color:#800000;"width:120px; height:120px/spanspan style="color:#800000;""/span></img>
以上就是图片上传的实现。有很多方法。我只使用其中之一(formData)。具体的功能我们来详细介绍一下。
比较。 . . .
转载于: