내 문제로 나를 도와 주면 Vue.js를 사용했습니다. 내 임무는 base64에서 이미지를 변환하고 다음 서버로 보내는 것입니다. 그래서 아래에 코드를 작성했지만 오류가 발생했습니다. readfile 함수를 호출 할 때 오류가 다시 발생했습니다. 여기에 이미지 설명을 입력하십시오.
오류는
"this.bufferToBase64는 함수가 아닙니다."
내 HTML 코드는 다음과 같습니다.
<div>
<button class="btn">Upload</button>
<input type="file" id="fileItem" @change="readfile('fileItem')">
</div>
그리고 내 방법은 다음과 같습니다.
readfile(id) {
let f = document.getElementById(id).files[0];
console.log(f);
let r = new FileReader();
r.readAsArrayBuffer(f);
r.onload = function (e) {
console.log(e);
let data = r.result;
console.log('data: ' + data);
let bytes = new Uint8Array(data);
console.log('bytes: ' + bytes);
let b64encoded = this.bufferToBase641(bytes);
console.log(b64encoded);
};
},
bufferToBase641(buf) {
let binstr = Array.prototype.map.call(buf, function (ch) {
return String.fromCharCode(ch);
}).join('');
return btoa(binstr);
}
다음으로 Element.io에서 업로드 컴포넌트를 사용하겠습니다. 하지만 지금은 같은 오류가 있습니다. 내 HTML :
<el-upload
:file-list="fileList"
:auto-upload="false"
:before-upload="readfile"
accept="image/*">
<el-button type="primary" style="padding: 10px 40px;">
<span class="glyphicon glyphicon-picture"></span> Attach</el-button>
</el-upload>
그리고 내 방법 :
setAtrbt(){
let input = document.querySelector('.el-upload__input');
console.log(input);
input.setAttribute('onchange', 'vm.readfile(this.files[0])')
},
readfile(id) {
let f = document.getElementById(id).files[0];
console.log(f);
let r = new FileReader();
r.readAsArrayBuffer(f);
r.onload = function (e) {
console.log(e);
let data = r.result;
console.log('data: ' + data);
let bytes = new Uint8Array(data);
console.log('bytes: ' + bytes);
let b64encoded = this.bufferToBase641(bytes);
console.log(b64encoded);
};
},
bufferToBase641(buf) {
let binstr = Array.prototype.map.call(buf, function (ch) {
return String.fromCharCode(ch);
}).join('');
return btoa(binstr);
}
},
mounted(){
this.setAtrbt();
}
누군가 내가 bufferToBase641 함수를 어떻게 사용하는지 말해 줄 수 있습니까? 그리고 Element.io에서의 내 행동이 좋지 않을까요?
범위 문제가 있습니다. this자체 this개체 가있는 중첩 함수에 있으므로에 대한 참조를 잃었습니다 . 코드 개선 :
eadfile(id) {
let f = document.getElementById(id).files[0];
console.log(f);
let r = new FileReader();
r.readAsArrayBuffer(f);
var self = this // ADD THIS
r.onload = function (e) {
console.log(e);
let data = r.result;
console.log('data: ' + data);
let bytes = new Uint8Array(data);
console.log('bytes: ' + bytes);
let b64encoded = self.bufferToBase641(bytes); // CHANGE THIS
console.log(b64encoded);
};
},
r.onload콜백을 위해 화살표 함수를 사용할 수도 있습니다 .
eadfile(id) {
let f = document.getElementById(id).files[0];
console.log(f);
let r = new FileReader();
r.readAsArrayBuffer(f);
r.onload = e => { // CHANGE JUST THIS LINE
console.log(e);
let data = r.result;
console.log('data: ' + data);
let bytes = new Uint8Array(data);
console.log('bytes: ' + bytes);
let b64encoded = this.bufferToBase641(bytes);
console.log(b64encoded);
};
},
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다