Почему произошла ошибка при загрузке chrome, а не firefox? - PullRequest
0 голосов
/ 21 февраля 2020

Я разрабатываю загружаемую часть. Я использовал плагин 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...