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

  比较。 . . .

  转载于:

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线