做的一个是有关少儿编程的项目,甲方的需求是通过获取首帧来判断是否是sb3文件,而不是通过后缀名来判断的,以防别人改后缀名来上传文件
- 在main.js引入,在展示sb3文件的时候也会用到
//安装
"scratch-vm": "0.2.0-prerelease.20191119203901",
"scratch-render": "0.1.0-prerelease.20191126210304",
"scratch-storage": "1.3.2",
"scratch-svg-renderer": "0.2.0-prerelease.20191104164753",
"scratch-audio": "0.1.0-prerelease.20190925183642",
"twgl.js": "4.4.0"
<el-form-item label="sb3文件" prop="file">
<div class="documnet">
<div style="corsor: pointer !important">
<div class="input-button">
上传文件
<input
type="file"
id="file"
name="file"
@input="change"
style="
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
"
/>
</div>
<div class="namefile" v-if="ruleForm.file">
<span> {{ namefile }} </span>
<!-- <span
class="fileicon el-icon-circle-close"
@click="deletefile()"
></span> -->
</div>
</div>
</div>
</el-form-item>
//使用canvas展示上传的sb3文件
<canvas id="test" width="480" height="360" v-show="false"></canvas>
//展示首帧图片
<img
src=""
alt=""
id="thumbnail"
width="240px"
height="180px"
border="2px"
v-show="false"
/>
change(e1) {
this.downLength = true;
var that = this;
var canvas = document.getElementById("test");
var render = new this.ScratchRender(canvas);
var vm = this.initVM(render);
const fileInput = document.getElementById("file");
const loadFile = this.loadFileInputIntoVM.bind(
null,
fileInput,
vm,
render
);
loadFile().then(() => {
render.draw();
const reader = new FileReader();
const base64Data = canvas.toDataURL("image/jpeg", 0.7);
const blob = this.dataURItoBlob(base64Data);
reader.onload = function (e) {
const img = document.getElementById("thumbnail");
img.src = e.target.result;
console.log(e.target.result);
//获取到的是base64格式
const files = that.base64toFile(e.target.result);
console.log(files);
//通过formData来提交sb3文件
const formdata2 = new window.FormData();
formdata2.append("type", "user");
formdata2.append("file", e1.target.files[0]);
that.$api
.uploadFile(formdata2)
.then((res) => {
if (res.code == 10000) {
that.ruleForm.file = res.data.oss_url;
that.namefile = res.data.name;
that.downLength = false;
} else {
that.$message.error(res.message);
}
})
.catch((err) => {
that.$message.error(err.message);
});
//图片通过formData提交
const formdata1 = new window.FormData();
formdata1.append("type", "user");
formdata1.append("image", files);
that.$api
.uploadImg(formdata1)
.then((res) => {
if (res.code == 10000) {
that.ruleForm.cover = res.data.oss_url;
that.isshowtrue = true;
} else {
that.$message.error(res.message);
}
})
.catch((err) => {
that.$message.error(err.message);
});
};
reader.readAsDataURL(blob);
});
},
dataURItoBlob(base64Data) {
let byteString;
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1]);
else byteString = unescape(base64Data.split(",")[1]);
const mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
const ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString });
},
loadFileInputIntoVM(fileInput, vm, render) {
const reader = new FileReader();
return new Promise((resolve) => {
reader.onload = () => {
vm.start();
console.log(reader.result);
vm.loadProject(reader.result)
.then(() => this.waitForSVGSkinLoad(render))
.then(() => {
resolve();
})
.catch(() => {
//捕获到首帧不是sb3文件
this.namefile = "";
this.ruleForm.file = "";
this.ruleForm.cover = "";
this.isshowtrue = false;
this.downLength = false;
this.$message.error("请上传sb3文件");
console.log("please upload corract sb3 file");
});
};
console.log(fileInput.files[0]);
reader.readAsArrayBuffer(fileInput.files[0]);
});
},
initVM(render) {
const vm = new VirtualMachine();
const storage = new this.ScratchStorage();
vm.attachStorage(storage);
vm.attachRenderer(render);
vm.attachV2SVGAdapter(new this.ScratchSVGRenderer.SVGRenderer());
vm.attachV2BitmapAdapter(new this.ScratchSVGRenderer.BitmapAdapter());
return vm;
},
base64toFile(dataurl, filename = "file") {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},