图片上传(基于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对象)
- 实现步骤
①:样式的实现