<el-upload
action
v-model="imageUrl.file"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:on-change="uploadSectionFile"
list-type="picture-card"
>
<img
style="height: 150px; width: 150px"
v-if="imageUrl.url"
:src="imageUrl.url"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
uploadSectionFile(file) {
console.log(file.raw, "文件上传");
const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
if (!isJPG) {
this.$message.error("只能是图片!");
return;
}
},
beforeAvatarUpload(file) {
this.imageUrl.file = file;
this.imagePreview(this.imageUrl.file, 1);
return false;
},
imagePreview(file, v) {
var self = this;
//定义一个文件阅读器
var reader = new FileReader();
//文件装载后将其显示在图片预览里
reader.onload = function (e) {
//将bade64位图片保存至数组里供上面图片显示
if (v == 1) {
self.imageUrl.url = e.target.result;
} else {
self.vedioUrl.url = e.target.result;
}
};
reader.readAsDataURL(file);
},
视频上传同理