我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。
在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。
通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下：
iview官网查看
data(){return{iconFileSrc: null, // 展示再页面上的图片路径editFormData: {iconFile: null // 传给后台的图片路径}}}
<Card title="图片素材" class="mt10"><FormItem label="应用图标" prop="iconFile"><div v-if="iconFileSrc" class="upload-icon"><img height="100%" :src="iconFileSrc"></div><Uploadname="iconFile" // 上传的文件字段名type="drag" // 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）v-model="editFormData.iconFile"style="display:inline-block;width:58px;":max-size="200" // 文件大小限制，单位 kbaccept=".png" //接受上传的文件类型:format="['png']" //支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用:before-upload="iconFileBeforeUpload" // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传action="//" // 上传的地址，必填><div v-if="!editFormData.iconFile" style="width: 58px;height:58px;line-height: 58px;"><Icontype="md-add"size="20"></Icon></div><span v-else class="cp">更换</span></Upload><div class="tips">请上传200K以内的PNG格式图片，尺寸为512X512</div></FormItem></Card>
// 应用图标上传前iconFileBeforeUpload (file) {console.log(file)if (file.type !== 'image/png') {return this.$Notice.warning({title: '上传格式错误',desc: '上传200K以内的PNG格式图片，尺寸为512X512'})}if (file.size > 204800) {return this.$Notice.warning({title: '文件超出限制大小',desc: '上传200K以内的PNG格式图片，尺寸为512X512'})}this.editFormData.iconFile = file// 展示的时候 使用base64进行展示 传入数据库的时候 还是使用原始的file 并进行forData转化const reader = new FileReader()reader.readAsDataURL(file) // 读出 base64reader.onload = () => {// 图片的 base64 格式, 可以直接当成 img 的 src 属性值const _base64 = reader.resultthis.iconFileSrc = _base64}return false},
file
对于图片上传，我们也可以先将图片转换为base64进行传输，此时由于传输的图片内容就是一段字符串，故上传接口可以当做普通post接口处理，当图片传输到后台后，可以在转换为文件实体存储。
当然，考虑到base64转换效率及其本身的大小，本方法还是适合于上传内容简单或所占内存较小的文件。
参考：/hhhyaaon/p/5929492.html
