图片预览 base64 element 图片上传 预览图
2021-03-23 20:26
标签：div auto vat and XML cas src base pos https://www.jianshu.com/p/bee8c393c422 感谢 使用了element ui,愿望是 选择图片文件之后,不立即上传,先显示预览图,点击上传按钮之后再上传,element版本是2.13 用到了 URL.createObjectURL(file.raw) html js 接着是图片转为base64,一下和上面的无关,就是搜到了在这里做个记录 图片预览 base64 element 图片上传 预览图 标签：div auto vat and XML cas src base pos 原文地址：https://www.cnblogs.com/zonglonglong/p/12683446.html el-upload
class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
ref="upload"
:show-file-list="false"
:auto-upload="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:on-change="onchange"
>
img v-if="form.img" :src="form.img" class="avatar">
i v-else class="el-icon-plus avatar-uploader-icon">i>
el-upload>
el-button type="success" style="margin-left: 10px;" @click="upimg">上传el-button>
onchange:function(file,filelist){
let fileName = file.name;
let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(fileName.toLowerCase())) {
// console.log(URL.createObjectURL(file.raw))
Vue.set(this.form,"img",URL.createObjectURL(file.raw))//新版本需要这么做,老版本好像file或者filelist里面直接就有url,使用Vue.set是应为需要重新渲染
} else {
this.$message.error(‘请选择图片文件‘);
}
}
function img264(imgUrl){
let that = this
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
// 至关重要
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//得到一个blob对象
var blob = this.response;
console.log("blob", blob)
// 至关重要
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
let base64 = e.target.result;
console.log("方式一》》》》》》》》》", base64)
// that.form.img = base64
that.$set(form,"img",base64)
};
oFileReader.readAsDataURL(blob);
}
}
xhr.send();
}
上一篇：16_封装上传多图组件
文章标题：图片预览 base64 element 图片上传 预览图
文章链接：http://soscw.com/index.php/essay/67862.html