后台管理系统之“图片上传” --vue

2023-02-22 09:09:24

图片上传（基于vue)

　　相信上传图片是所有系统必备的功能吧，工作中的第一个管理系统就在上传图片的功能上卡顿了一整天。

　　当时用的elementUI组件，但是由于样式和设计图样式差别较大再加上原生相较好理解，便使用了原生实现图片上传功能。

　　菜鸟上路，望多多指点。

图片上传原理（csdn里看到的比较通俗易懂的图片上传原理）

　　　参考地址：https://blog.csdn.net/q857277886/article/details/79092591

　　前端网页文件上传一般使用 <input type="file" />来实现。

在 HTML 文档中 <input type="file" />标签每出现一次，一个 FileUpload 对象就会被创建。

　　 2.该标签包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。

3.多选：标签可以通过添加 multiple 属性来支持多选；如果选择了多个文件, 这个值表示第一个被选择的文件路径. JavaScript 可以通过 Input 的 FileList 属性获取到其他的文件路径.

4.文件信息：可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表，列表包含图片的name，type，size等属性。

　　 5.限制文件类型：你可以使用 input 的 accept 属性，accept 属性接受一个逗号分隔的 MIME 类型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG

　　 6.选择文件会触发input的onchange事件;

　　 7.上传：上传文件前使用FileReader对象读取指定file的文件，并将文件转换为二进制字符串, 并将xhr对象, overrideMimeType 属性设置为text/plain; charset=x-user-defined-binary, 最终后台接收到二进制后再做具体处理。(注：小编用的是FormData对象）

实现步骤

　　①：样式的实现

　　　　代码：

　　　　　　<el-form-item label="产品图片" id="img_box">

　　　　　　　　<form ref="form" enctype="multipart/form-data" id="formImg" style="position:relative">

　　　　　　　　　　<input type="file" name="uploadFile" @change="creatUrl($event)" accept="image/png,image/jpg,image/jpeg" class="imgInput" style="position:absolute; z-index:9999999">

　　　　　　　　　　<img v-if="imageUrl" :src="data:imageUrl" style="position:absolute; top:0; left:0; height:80px; width:80px"></img>

　　　　　　　　　　<span style="position:absolute; bottom:20px; left:100px; width:400px; color:#999999; font-size:12px">图片格式为JPG/JPEG/PNG,图片大小不超过2M</span>

　　　　　　　　　　<em v-if="imgSytle" style="width:280px;display:block;position:absolute;top:70px;color:#f56c6c; font-size:12px;font-style:normal">{{msg2}}</em>

　　　　　　　　</form>

　　　　　　</el-form-item>

　　　　首先给form标签插入设计图要求的背景图片，这时背景图片是看不见的，因为根据代码，input标签定位到了form上，而img标签又定位在form上input下，所以我们需要将input标签的背景颜色设置为透明 opacity:0 ，这样在没有上传时，页面显示的为form的背景图片，确定好要上传的图片时，则用img标签显示上传的本地图片。

　　　　注：也可以都绑定给img标签，双向绑定img的src，根据要求实时更新src.

　　②：在用户确定了要上传的图片时，页面要显示本地要上传的图片

　　　　注：input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表，列表包含图片的name，type，size等属性。

　　　　HTML代码 :

<input type="file" name="uploadFile" @change="creatUrl($event)">

　　　　　　首先给input标签绑定“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[] )

　　③：上传图片到后台

　　　　通过FormData对象可以组装一组用XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。表单的编码类型设置为multipart/form-data 并且form要绑定vue的ref属性，方便获取form对象。

　　　　　 代码：

<form ref="form" enctype="multipart/form-data" >

　　　　步骤：提交按钮绑定onclick事件，submit方法

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

　　　　　　　　　利用axios将数据fd发送给后台，后台会返回此图片的fileName

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

　　　　　　　　　图片渲染时，先请求渲染接口获取图片的线上imgName,再通过img的src拼接图片的线上地址，代码如下：

<img :src="`http://***.***.***.***:8080/product/getFtpImage.do?filePath=`+item.imgName" style="width:120px; height:120px"></img>

以上便是图片上传的实现，方法有很多种，小编只用了其中之一（formData）,具体功能具体对待吧。

比心。。。。

码农公寓

相关文章