<el-form-item label="服务图标:" prop="serviceName" class="formItem">
<el-button size="mini" type="reset" icon="el-icon-plus" @click="$refs.serviceImgDom.value = ''; $refs.serviceImgDom.click()"></el-button>
<img :src="serviceIcon" style="width: 60px;">
<input type="file" ref="serviceImgDom" style="display: none;" accept=".png;.jpeg;.svg;" @change="imgUpload">
</el-form-item>
1.图片文件转base64
imgUpload(e) {
let file = e.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
console.log(reader.result);
this.serviceIcon = reader.result;
}
reader.onerror = function(err) {
console.log(err);
}
},
2.base64转成文件下载(base64—> blob)
downMailDataEncrypt(base64data) {
var blob = dataURLtoBlob(base64data);
const a = document.createElement("a");
const objectUrl = URL.createObjectURL(blob);
a.setAttribute("href", objectUrl);
a.setAttribute("download", "test.txt");
a.click();
URL.revokeObjectURL(a.href);
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
bstr = atob(arr[0]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: 'vkd' });
}
}
3.File文件对象转成二进制流
fileUpload(e) {
let file = e.target.files[0];
let that = this;
var reader = new FileReader();
reader.onload = function (e) {
var arrayBuffer = e.target.result;
that.fileData = arrayBuffer;
};
reader.readAsArrayBuffer(file);
}
4.响应文件流前端js通过blob生成下载链接
var blob = new Blob([res], { type: 'application/x-msdownload' });
const a = document.createElement("a");
const objectUrl = URL.createObjectURL(blob);
a.setAttribute("href", objectUrl);
a.setAttribute("download", "test.txt");
a.click();
URL.revokeObjectURL(a.href);