Html前端代码
<div class="openBox">
<p v-if="resourceArr.length">文件名:{{resourceArr[0].name}}</p>
<div class="changeFile" @click="$refs['file'].click()">选择文件</div>
<input type="file" ref="file" style="display:none" @change="fileSelect" :key="fileKey">
</div>
JS前端代码
fileSelect(e) {
const vm = this;
const files = this.$refs["file"]?.files;
if (files) {
files.forEach((file) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
if (vm.checked(file)) {
vm.resourceArr[0] = {
id: file.lastModified,
name: file.name,
size: file.size,
type: "file", //or url default:url
url: reader.result,
data: file,
};
vm.fileKey = Math.random();
}
vm.fileKey = Math.random();
};
reader.onerror = () => {
vm.$error(`获取文件失败`);
};
});
} else {
vm.$error(`获取文件失败`);
}
},
/**
* 简单文件校验
*/
checked({ size, type }) {
const vm = this;
//单张文件大小校验
if (size > vm.byteSize) {
vm.$message({
type: "warning",
message: `单张上传不能超过${vm.size}M`,
});
return false;
}
//文件类型校验
// if (!(new RegExp(vm.type.replace(/\W/g, '|')).test(type.toLowerCase()))) {
// vm.$message({
// type: 'warning',
// message: `上传文件仅支持${vm.type}类型`
// })
// return false
// }
return true;
},