| | |
| | | <i class="el-icon-plus"></i> |
| | | </div> |
| | | </div> |
| | | <div style="display: block;"> |
| | | <input type="file" ref="file" :accept="accept" @change="getFile" /> |
| | | <progress id="progressBar" value="0" max="100"></progress> |
| | | <span id="status">0%</span> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | }, |
| | | getFile (e) { |
| | | if (e.target && e.target.files.length > 0) { |
| | | const loading = this.$loading({ |
| | | lock: true, |
| | | text: '上传中,请等待', |
| | | spinner: 'el-icon-loading', |
| | | background: 'rgba(0, 0, 0, 0.7)' |
| | | }); |
| | | this.$emit('loading') |
| | | const config = { |
| | | onUploadProgress: function(progressEvent) { |
| | | console.log(progressEvent) |
| | | const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); |
| | | document.getElementById('progressBar').value = percentCompleted; |
| | | document.getElementById('status').textContent = percentCompleted + '%'; |
| | | }, |
| | | headers: { |
| | | 'Content-Type': 'multipart/form-data' |
| | | } |
| | | } |
| | | |
| | | // const loading = this.$loading({ |
| | | // lock: true, |
| | | // text: '上传中,请等待', |
| | | // spinner: 'el-icon-loading', |
| | | // background: 'rgba(0, 0, 0, 0.7)' |
| | | // }); |
| | | // this.$emit('loading') |
| | | const formdate = new FormData() |
| | | formdate.append('file', e.target.files[0]) |
| | | formdate.append('folder', this.folder) |
| | | axios.post(this.uploadImgUrl, formdate) |
| | | axios.post(this.uploadImgUrl, formdate,config) |
| | | .then(res => { |
| | | this.$emit('success', res.data.data) |
| | | }) |
| | |
| | | this.$message.error(e) |
| | | }) |
| | | .finally(() => { |
| | | loading.close(); |
| | | // loading.close(); |
| | | this.$refs.file.value = null |
| | | }) |
| | | } |