网站内容管理系统上传图片(图片上传（基于vue）的上传图片处理方法详解！)

　　网站内容管理系统上传图片(图片上传（基于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）。具体的功能我们来详细介绍一下。

　　比较。 . . .

　　转载于：