1500字范文 > elementUI + Vue 实现图片上传且可预览以base64字符串上传到服务器

elementUI + Vue 实现图片上传且可预览以base64字符串上传到服务器

时间：2021-07-12 17:38:18

想要解决的问题

上传图片且可预览(这里只上传单个图片)、不是一上传图片就直接传给服务器，而是随表单提交再一起传到服务器。(这里将图片转成base64以字符串的形式传输给服务器)

我的需求

需要将图片转成base64字符串的形式，作为请求的一个参数传给后端。后端根据该字段进行图片的存储。

后端对图片的处理

我这里的后端处理图片的方式是：给图片生成个随机不重复的名字加上.jpg 或.png后缀命名，然后存储到其硬盘上。最后将图片存放的具体位置存到数据库对应表的字段中，如：cover/AEJISJW25W.jpg前端获取并显示图片，即只要将服务器地址 + 字段值就行了

例如：<img src="/cover/AEJISJW25W.jpg" />

另外的做法：后端直接将已经转成base64字符串形式的图片，存在数据库表的字段中。不知道能不能放下这么长的字符串（哈哈！），所以此方法对于图片有要求，图片需要尽量小，不然转成的base64太长了！

技术栈

Element-UI 和 Vue

说明

这里借用了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-uploadclass="avatar-uploader"action="":on-change="imgBroadcastChange"accept="image/jpg,image/png,image/jpeg":show-file-list="false":auto-upload="false"><img v-if="form.imageUrl" :src="form.imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon" /></el-upload></el-form-item><el-form-item><el-button type="primary">确定</el-button><el-button>取消</el-button></el-form-item></el-form></div></template><script>export default {data() {return {form: {imageUrl: ''}}},methods: {imgBroadcastChange(file, fileList) {const isLt2M = file.size / 1024 / 1024 < 2if (isLt2M) {// uploadImgToBase64()返回一个Promise对象，通过.then()获取其数据。其中data.result是图片转成的base64值this.uploadImgToBase64(file.raw).then(data => {this.form.imageUrl = data.result })} else {this.$message.error('上传封面图片大小不能超过 2MB!')}},uploadImgToBase64(file) {//核心方法，将图片转成base64字符串形式return new Promise((resolve, reject) => {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = function() {// 图片转base64完成后返回reader对象resolve(reader)}reader.onerror = reject})}}}</script><style lang="scss">.form-container{width: 700px;margin: 0 auto;.avatar-uploader .el-upload {border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;img {object-fit: contain; //（保持纵横比缩放图片，使图片的长边能完全显示出来）}}.avatar-uploader .el-upload:hover {border-color: #409EFF;}.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}.avatar {width: 178px;height: 178px;display: block;}}</style>