-1
所以我不知道爲什麼這段代碼不工作。我擁有的是組件接受的文件類型數組。我嘗試遍歷該數組,並檢查正在上傳的文件是否屬於這些類型之一。如果不是那麼我return;
。由於某些原因,acceptedFormats.forEach
以下的代碼將繼續運行。如果我console.log
audioType
和file.type
我得到每個INVALID
。那麼它不應該回來嗎?謝謝!函數不能返回?
class Upload extends React.Component {
state = {
percentage: 0,
uploading: false
}
handleUpload = (e) => {
if (this.state.uploading) {
return;
}
const file = e.target.files[0];
const acceptedFormats = ["audio/wav", "audio/mp3", "audio/m4a"];
// TODO: Figure out why this isn't working
acceptedFormats.forEach((audioType) => {
console.log(audioType);
console.log(file.type);
if(audioType !== file.type) {
console.log('INVALID');
return;
}
})
const audioRef = storageRef.child('audio/' + file.name);
const task = audioRef.put(file);
task.on('state_changed', function(snapshot){
const progress = (snapshot.bytesTransferred/snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
this.setState(() => ({
percentage: progress
}))
}.bind(this), function(error) {
}, function() {
const downloadURL = task.snapshot.downloadURL;
const fileName = task.snapshot.metadata.name;
let songName = removeFileExtension(file.name);
songName.replace(/\./g,' ');
db.ref(`users/${this.props.uid}/uploadedSongs/`).push({
downloadURL,
fileName,
songName,
}).then(() => {
this.setState({
percentage: 0,
uploading: false
})
Alert.success(`Upload successful`, {
position: 'top-right',
effect: 'slide',
timeout: 3000
})
})
}.bind(this));
}
render() {
return (
<div className="Upload">
<label className={this.state.uploading ? "Upload__button-disabled btn" : "Upload__button btn"}>
<span className="Upload__button-text">{this.state.uploading ? "Uploading" : "Upload a song"}</span>
<input className="Upload__input" type="file" onChange={(e) => this.handleUpload(e)} disabled={this.state.uploading ? true : false}/>
</label>
<span style={{color: '#808080', fontSize: '12px'}}>Accepted formats: .wav, .mp3, .m4a</span>
</div>
);
}
}
ReactDOM.render(<Upload />, document.querySelector('#u'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>
<h1>Example Upload</h1>
<div id="u"></div>
我不明白這裏面返回
Boolean
true
或false
和if
條件和聲明return
:「如果我的CONSOLE.LOG和audioType文件。類型我得到每個無效。「記錄這些東西不會返回「無效」。你是否試圖說你進入'if(audioType!== file.type)'塊? – jmargolisvt這是一個純Javascript嗎? Javascript是否接受關鍵字'extends'就像你現在在做什麼?你想要返回一個值還是停止這個過程? – smzapp
我清理它,所以它的runnable ...這顯然是React.js,所以我加了標記 – styfle