Merge branch 'master' of github.com:szuprefix/vue-django

szuprefix · Oct 16, 2020 · 144322a · 144322a
2 parents a8dd654 + 4bc7c34
commit 144322a
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 46 deletions.
diff --git a/src/components/media/qcloud/ImageUpload.vue b/src/components/media/qcloud/ImageUpload.vue
@@ -25,7 +25,6 @@
     </div>
 </template>
 <script>
-    import TcCos from 'cos-js-sdk-v5'
     import {format} from 'date-fns'
     import {template} from 'lodash'
     export default {
@@ -46,9 +45,9 @@
                     return {url: u}
                 }),
                 elUploader: undefined,
-                tcCos: new TcCos({
-                    getAuthorization: this.getAuthorization
-                }),
+//                tcCos: new TcCos({
+//                    getAuthorization: this.getAuthorization
+//                }),
                 dialogImageUrl: '',
                 dialogVisible: false
             }
@@ -128,7 +127,7 @@
             },
             getFileNameContext (fn) {
                 let ps = fn.split('.')
-                let extName = undefined
+                let extName
                 let fileName = fn
                 let baseName = fn
                 if (ps.length > 1) {
@@ -155,23 +154,27 @@
 //                console.log(fileName)
 //                return
                 return new Promise((resolve, reject) => {
-
-                    let uploader = this.tcCos.putObject({
-                        Bucket: this.bucket, /* 必须 */
-                        Region: this.region, /* 存储桶所在地域，必须字段 */
-                        Key: fileName,
-                        Body: req.file,
-                        onProgress: function (info) {
-                            console.log('tcCos.onProgress', info, req)
-                            req.onProgress(info)
-                        }
-                    }, function (err, data) {
+                    import('cos-js-sdk-v5').then(TcCos => {
+                        let tcCos = new TcCos({
+                            getAuthorization: this.getAuthorization
+                        })
+                        tcCos.putObject({
+                            Bucket: this.bucket, /* 必须 */
+                            Region: this.region, /* 存储桶所在地域，必须字段 */
+                            Key: fileName,
+                            Body: req.file,
+                            onProgress: function (info) {
+                                console.log('tcCos.onProgress', info, req)
+                                req.onProgress(info)
+                            }
+                        }, function (err, data) {
 //                        console.log(err || data)
-                        if (err) {
-                            reject(err)
-                        } else {
-                            resolve(data)
-                        }
+                            if (err) {
+                                reject(err)
+                            } else {
+                                resolve(data)
+                            }
+                        })
                     })
                 })
             }

diff --git a/src/components/media/qcloud/mobile/Uploader.vue b/src/components/media/qcloud/mobile/Uploader.vue
@@ -1,9 +1,9 @@
 <template>
-    <uploader :after-read="afterRead" @delete="onDelete" v-model="fileList" v-bind="[$props, $attrs]"/>
+    <uploader :after-read="afterRead" :preview-options="{images: previewUrls}" @delete="onDelete" v-model="fileList"
+              v-bind="[$props, $attrs]"/>
 </template>
 <script>
     import {Uploader} from 'vant'
-    import TcCos from 'cos-js-sdk-v5'
     import {format} from 'date-fns'
     import {template} from 'lodash'
     import ServerResponse from 'vue-django/src/mixins/server_response'
@@ -21,9 +21,9 @@
             return {
                 fileList: this.genFileList(),
                 elUploader: undefined,
-                tcCos: new TcCos({
-                    getAuthorization: this.getAuthorization
-                })
+//                tcCos: new TcCos({
+//                    getAuthorization: this.getAuthorization
+//                })
             }
         },
         components: {Uploader},
@@ -108,33 +108,50 @@
 //                console.log(fileName)
 //                return
                 return new Promise((resolve, reject) => {
-                    this.tcCos.putObject({
-                        Bucket: this.bucket, /* 必须 */
-                        Region: this.region, /* 存储桶所在地域，必须字段 */
-                        Key: fileName,
-                        Body: file,
-                        onProgress: function (info) {
+                    import('cos-js-sdk-v5').then(TcCos => {
+                        let tcCos = new TcCos({
+                            getAuthorization: this.getAuthorization
+                        })
+                        tcCos.putObject({
+                            Bucket: this.bucket, /* 必须 */
+                            Region: this.region, /* 存储桶所在地域，必须字段 */
+                            Key: fileName,
+                            Body: file,
+                            onProgress: function (info) {
 //                            console.log('tcCos.onProgress', info, file)
-                            req.message = `${info.percent * 100}%`
+                                req.message = `${info.percent * 100}%`
 //                            req.onProgress(info)
-                        }
-                    }, function (err, data) {
+                            }
+                        }, function (err, data) {
 //                        console.log(err || data)
-                        data.name = fn
-                        if (err) {
-                            req.status = 'failed'
-                            req.message = '上传失败'
-                            reject(err)
-                        } else {
-                            req.status = undefined
-                            req.message = undefined
-                            resolve(data)
-                        }
+                            data.name = fn
+                            if (err) {
+                                req.status = 'failed'
+                                req.message = '上传失败'
+                                reject(err)
+                            } else {
+                                req.status = undefined
+                                req.message = undefined
+                                resolve(data)
+                            }
+                        })
                     })
                 })
+            },
+            addThumbParams (fileList, size) {
+                return fileList.map(f => {
+                    if (f.url && f.url.startsWith('http')) {
+                        return f.url.concat(`?imageMogr2/thumbnail/${size}x${size}`)
+                    }
+                    return f
+                })
+            }
+        },
+        computed: {
+            previewUrls () {
+                return this.addThumbParams(this.fileList, 640)
             }
         },
-        computed: {},
         watch: {
             value () {
                 this.fileList = this.genFileList()