Я разрабатываю загружаемую часть. Я использовал плагин dropzone для загрузки файла. Если файл небольшой (<100 МБ), он работает хорошо. Но если файл большой (> 100 МБ), в браузере chrome произошла ошибка Aw Sanp. Something went wrong while displaying this web page.
. Если я использую firefox, он хорошо работает без ошибок.
Я знаю, chrome лимит загрузки больше, чем firefox, поэтому я думаю, что он должен работать. Но почему эта ошибка происходит? Я пробовал в режиме инкогнитора, но тоже самое.
Пожалуйста, помогите мне.
<div class="a-video-container" v-cloak ref="dropZone" :class="dropzoneClass">
<div class="video-placeholder" v-show="!upload && video.api_id==''" @click="opeFileSelector()">
<i class="fa fa-file-video icon"></i>
Drag n Drop video file here to upload
<div class="alert alert-warning mtm">
Upload Video.
</div>
<input type="file" class="hidden" ref="fileInput"
@change="uploadFileInput()"/>
</div>
<div class="progress-layer" v-show="upload">
Uploading @{{ progress }}%
<div class="progress-ring"></div>
Preview not available
<br/>
<button class="btn btn-link"
@click="cancelUpload()">cancel</button>
</div>
<div class="progress" v-show="upload">
<div class="progress-bar progress-bar-striped active"
role="progressbar"
aria-valuemin="0"
aria-valuemax="100"
v-bind:style="{width: progress + '%'}">
</div>
<div class="title under">
Uploading @{{ file.name }} | @{{
Math.ceil(file.size/1024/1024) }}Mb
</div>
<div class="title top" v-bind:style="{width: progress + '%'}">
Uploading @{{ file.name }} | @{{
Math.ceil(file.size/1024/1024) }}Mb
</div>
</div>
</div>
<script>
...
uploadFileInput(e) {
this.startUpload(event.target.files[0]);
},
startUpload(file) {
this.upload = true;
this.file = file;
let CancelToken = axios.CancelToken;
this.cancelSource = CancelToken.source();
this.getBase64(file).then(data => {
let params = {
name: this.video.title || 'test',
description: this.video.description || 'test',
notifications: [],
file: {
name: file.name,
data: data
},
preview: {
start: this.video.preview_start,
end: this.video.preview_end
}
}
let config = {
cancelToken: this.cancelSource.token,
onUploadProgress: progressEvent => {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
this.progress = percentCompleted;
}
}
axios.post(this.endpoint + '/api/media', params, config).then(response => {
this.video.api_id = response.data.tmp_filename;
this.upload = false;
this.progress = 0;
console.log(this.video.api_id);
});
});
},
...
</script>