想要解决的问题
- 上传图片且可预览(这里只上传单个图片)、不是一上传图片就直接传给服务器,而是随表单提交再一起传到服务器。(这里将图片转成base64以字符串的形式传输给服务器)
我的需求
- 需要将图片转成base64字符串的形式,作为请求的一个参数传给后端。后端根据该字段进行图片的存储。
后端对图片的处理
- 我这里的后端处理图片的方式是:给图片生成个随机不重复的名字加上.jpg 或.png后缀命名,然后存储到其硬盘上。最后将图片存放的具体位置存到数据库对应表的字段中,如:cover/AEJISJW25W.jpg
- 前端获取并显示图片,即只要将服务器地址 + 字段值就行了
例如:
<img src="http://www.jerrybro.cn/cover/AEJISJW25W.jpg" />
- 另外的做法:后端直接将已经转成base64字符串形式的图片,存在数据库表的字段中。不知道能不能放下这么长的字符串(哈哈!),所以此方法对于图片有要求,图片需要尽量小,不然转成的base64太长了!
技术栈
说明
- 这里借用了Element-UI的组件及样式、再加以改造而成。
- 适用于小项目(正常来说是将图片上传到阿里云OSS),将图片存放在自己的服务器(数据库/硬盘)上。
- 注意:最好对图片进行检测下,只上传比较小的图片,不然转出的base64一长串(太长了!!)
- 具体样式可以自己调整。
具体操作 (代码)
- 此处以SPA的vue组件的形式写的、自己在 main.js 中引入element-ui,即如下几行代码。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
<template>
<div class="form-container">
<el-form :model="form" label-width="80px">
<el-form-item label="封面">
<el-upload
class="avatar-uploader"
action=""
:on-change="imgBroadcastChange"
accept=