vue+element以base64的方式上传文件
最近在做一个element的upload以base64的方式实现文件上传,就需要前端处理上传文件的file文件流。接下来记录处理过程,仅供参考!1.使用element的upload组件,选择你需要的组件就行<!-- 上传照片 --><div class="uploadPhotoBox"><el-uploadstyle="height:126px;width:9
·
最近在做一个element的upload以base64的方式实现文件上传,就需要前端处理上传文件的file文件流。接下来记录处理过程,仅供参考!
1.使用element的upload组件,选择你需要的组件就行
<!-- 上传照片 -->
<div class="uploadPhotoBox">
<el-upload
style="height:126px;width:90px;display:inline-block;"
class="avatar-uploader"
action=''
:on-change="getFile"
:auto-upload="false"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<img v-else src="../../assets/head.png" style="height:126px;width:90px;"/>
<div class="changePhotoStyle">{{imageUrlText}}</div>
</el-upload>
</div>
2.method里面处理file生成base64格式,就是getBase64这个函数(FileReader需要使用promise封装才能使用)
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},
3.通过on-change方式获取到file的文件信息,然后调用this.getBase64转换成base64的方式。
getFile(file) {
// if(file.success){
console.log(file)
const isJPG = file.raw.type === 'image/jpeg';
const isPNG = file.raw.type === 'image/png';
const isLt5M = file.raw.size / 1024 / 1024 < 5;
if (!isJPG && !isPNG) {
this.$message.error('上传图片只能是JPG或者PNG格式!');
}
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!');
}
if((isJPG || isPNG) && isLt5M){
this.getBase64(file.raw).then(res => {
console.log(res)
//这里拿到base64的文件流,处理你自己的业务逻辑
});
}
},
以上代码亲测有效,可直接复制到项目中查看console.log打印出来效果,亲自动手试试,纸上得来终觉浅,绝知此事要躬行!
更多推荐
已为社区贡献4条内容
所有评论(0)