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

优采云发布时间: 2021-12-28 23:06

　　图片上传（基于vue）

　　相信上传图片是所有系统的必备功能，上班的第一个管理系统已经卡在了上传图片的功能上一整天了。

　　当时使用的elementUI组件，但由于样式和设计图风格差异较大，对原图的理解比较好，所以使用了原图上传功能。

　　菜鸟上路，望多多指教。

　　参考地址：

　　一般采用前端web文件上传来实现。

　　每当一个标签出现在 HTML 文档中时，就会创建一个 FileUpload 对象。

　　2. 该标签收录

一个用于输入文件名的文本输入字段，以及一个用于打开文件选择对话框以图形方式选择文件的按钮。标签的value属性保存了用户指定的文件名。

　　3.多选：标签可以通过添加多个属性来支持多选；如果选择了多个文件，则该值表示第一个选定文件的路径。JavaScript 可以通过 Input path 的 FileList 属性获取其他文件。

　　4.文件信息：可以通过input.files属性返回——返回值是一个FileList对象，它是一个收录

很多File文件的列表，列表收录

图片的名称、类型、大小等属性.

　　5. 限制文件类型：可以使用 input 的 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，在后台最终接收到binary后进行具体的处理。（注：编辑器使用 FormData 对象）

　　①：风格的实现

　　代码：

　　　　　　　　　　图片格式为JPG/JPEG/PNG,图片大小不超过2M

　　首先将设计图所需的背景图片插入到表单标签中。这时候背景图是不可见的，因为根据代码，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方法

　　在submit方法中，使用vue的this.$refs属性获取表单对象，var fd =new FormData(this.$refs.form)

　　使用axios将数据fd发送到后台，后台会返回这张图片的fileName

　　然后调用表单上传接口，将返回的fileName和表单填写的信息一起发送到后台。此时图片上传成功。

　　图片渲染时，首先请求渲染接口获取图片的在线imgName，然后通过img的src拼接图片的在线地址。代码如下：

　　以上就是图片上传的实现。有很多方法。我只使用其中之一（formData）。具体的功能我们来详细介绍一下。

　　比心。. . .

0

2021-12-28

网站内容管理系统上传图片

0 个评论

要回复文章请先登录或注册

AI时代内容工厂

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

0 个评论

发起人

AI时代内容工厂

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

0 个评论

发起人

相关问题