| 提交 | 用户 | age | ||
| 4dde14 | 1 | <template> |
| L | 2 | <div class="upload-container"> |
| 3 | <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true"> | |
| 4 | upload | |
| 5 | </el-button> | |
| 6 | <el-dialog :visible.sync="dialogVisible"> | |
| 7 | <el-upload | |
| 8 | :multiple="true" | |
| 9 | :file-list="fileList" | |
| 10 | :show-file-list="true" | |
| 11 | :on-remove="handleRemove" | |
| 12 | :on-success="handleSuccess" | |
| 13 | :before-upload="beforeUpload" | |
| 14 | class="editor-slide-upload" | |
| 15 | action="https://httpbin.org/post" | |
| 16 | list-type="picture-card" | |
| 17 | > | |
| 18 | <el-button size="small" type="primary"> | |
| 19 | Click upload | |
| 20 | </el-button> | |
| 21 | </el-upload> | |
| 22 | <el-button @click="dialogVisible = false"> | |
| 23 | Cancel | |
| 24 | </el-button> | |
| 25 | <el-button type="primary" @click="handleSubmit"> | |
| 26 | Confirm | |
| 27 | </el-button> | |
| 28 | </el-dialog> | |
| 29 | </div> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script> | |
| 33 | // import { getToken } from 'api/qiniu' | |
| 34 | ||
| 35 | export default { | |
| 36 | name: 'EditorSlideUpload', | |
| 37 | props: { | |
| 38 | color: { | |
| 39 | type: String, | |
| 40 | default: '#1890ff' | |
| 41 | } | |
| 42 | }, | |
| 43 | data() { | |
| 44 | return { | |
| 45 | dialogVisible: false, | |
| 46 | listObj: {}, | |
| 47 | fileList: [] | |
| 48 | } | |
| 49 | }, | |
| 50 | methods: { | |
| 51 | checkAllSuccess() { | |
| 52 | return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess) | |
| 53 | }, | |
| 54 | handleSubmit() { | |
| 55 | const arr = Object.keys(this.listObj).map(v => this.listObj[v]) | |
| 56 | if (!this.checkAllSuccess()) { | |
| 57 | this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!') | |
| 58 | return | |
| 59 | } | |
| 60 | this.$emit('successCBK', arr) | |
| 61 | this.listObj = {} | |
| 62 | this.fileList = [] | |
| 63 | this.dialogVisible = false | |
| 64 | }, | |
| 65 | handleSuccess(response, file) { | |
| 66 | const uid = file.uid | |
| 67 | const objKeyArr = Object.keys(this.listObj) | |
| 68 | for (let i = 0, len = objKeyArr.length; i < len; i++) { | |
| 69 | if (this.listObj[objKeyArr[i]].uid === uid) { | |
| 70 | this.listObj[objKeyArr[i]].url = response.files.file | |
| 71 | this.listObj[objKeyArr[i]].hasSuccess = true | |
| 72 | return | |
| 73 | } | |
| 74 | } | |
| 75 | }, | |
| 76 | handleRemove(file) { | |
| 77 | const uid = file.uid | |
| 78 | const objKeyArr = Object.keys(this.listObj) | |
| 79 | for (let i = 0, len = objKeyArr.length; i < len; i++) { | |
| 80 | if (this.listObj[objKeyArr[i]].uid === uid) { | |
| 81 | delete this.listObj[objKeyArr[i]] | |
| 82 | return | |
| 83 | } | |
| 84 | } | |
| 85 | }, | |
| 86 | beforeUpload(file) { | |
| 87 | const _self = this | |
| 88 | const _URL = window.URL || window.webkitURL | |
| 89 | const fileName = file.uid | |
| 90 | this.listObj[fileName] = {} | |
| 91 | return new Promise((resolve, reject) => { | |
| 92 | const img = new Image() | |
| 93 | img.src = _URL.createObjectURL(file) | |
| 94 | img.onload = function() { | |
| 95 | _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height } | |
| 96 | } | |
| 97 | resolve(true) | |
| 98 | }) | |
| 99 | } | |
| 100 | } | |
| 101 | } | |
| 102 | </script> | |
| 103 | ||
| 104 | <style lang="scss" scoped> | |
| 105 | .editor-slide-upload { | |
| 106 | margin-bottom: 20px; | |
| 107 | ::v-deep .el-upload--picture-card { | |
| 108 | width: 100%; | |
| 109 | } | |
| 110 | } | |
| 111 | </style> | |
