巡检图片上传

src/views/businessManagement/inspection/task.vue

@@ -276,10 +276,10 @@
                 </el-table-column>
                 <el-table-column prop="imgs" align="center" label="现场照片">
                   <template slot-scope="scope">
-                    <el-upload list-type="picture-card" v-show="dialogTitle != '巡检确认'" :disabled="dialogTitle == '巡检确认'"
+                    <el-upload list-type="picture-card" v-show="dialogTitle != '巡检确认'" :disabled="dialogTitle == '巡检确认'||scope.row.picUrl != ''"
                       class="upload-demo" action="/api/blade-resource/oss/endpoint/put-file"
                       :on-success="handleSuccess(scope.row)" :on-remove="handleRemove(scope.row)" :headers="headers"
-                      :limit="1" :on-exceed="handleExceed" :file-list="scope.row.fileList">
+                      :limit="1" :on-exceed="handleExceed" :file-list="scope.row.fileList" :before-upload="beforeAvatarUpload(index,scope.row.fileList)">
                       <i class="el-icon-plus"></i>
                     </el-upload>
                     <img @click="clickImg(scope.row.picUrl)" style="width: 200px;height: 200px;cursor: pointer;"
@@ -1292,6 +1292,97 @@ export default {
         val.fileList = []
       }
     },
+    beforeAvatarUpload(index,list){
+            return (file) =>{
+                // if(this.addForm[index].form.videoAttaches && this.addForm[index].form.picAttaches && this.addForm[index].form.videoAttaches.length + this.addForm[index].form.picAttaches.length < 3){
+                    const isLt3M = file.size
+
+                    // if(isLt3M >  1024 * 1024 * 2){
+                        // const r = confirm(
+                        //     // `您上传的图片大小超过5Mb,是否进行压缩上传？(此操作会降低图片质量)`
+                        //     `您上传的图片大小超过5Mb,请压缩后再次上传`
+                        // )
+                        // if(r){
+                            const _this = this
+                            return new Promise((resolve, reject) => {
+                                const image = new Image()
+                                let resultBlob = ''
+                                image.src = URL.createObjectURL(file)
+                                image.onload = () => {
+                                    // 调用方法获取blob格式，方法写在下边
+                                    resultBlob = _this.compressUpload(image, file)
+                                    const fs = new File([resultBlob], file.name, {
+                                        type: file.type,
+                                        width:200,
+                                        height:200
+                                    })
+                                    if (fs.size  > 1024 * 1024 * 3) {
+                                        // this.commonZipPic(fs)
+                                        this.$message.warning('压缩后图片仍大于3Mb，请您手动压缩')
+                                        reject()
+                                    }
+                                    resolve(fs)
+                                }
+                                image.onerror = () => {
+                                    reject()
+                                }
+                            })
+                        // }else{
+                        //     this.$message.warning('您上传的图片大小超过5Mb,请手动压缩后在上传')
+                        //     return false
+                        // }
+                    // }else{
+                    //     return true
+                    // }
+                // }else{
+                //     this.$message.error('故障视频与故障图片最多可上传3个')
+                //     return false
+                // }
+            }
+        },
+        /* 图片压缩方法-canvas压缩 */
+        compressUpload(image, file) {
+            const canvas = document.createElement('canvas')
+            const ctx = canvas.getContext('2d')
+            // const initSize = image.src.length
+            const width = image.width * 0.1 // 图片宽度 * 压缩比例
+
+            const height = image.height * 0.1 // 图片高度 * 压缩比例
+
+            canvas.width = width // 画布宽度
+
+            canvas.height = height // 画布宽度
+            // const { width } = image
+            // const { height } = image
+            // canvas.width = width
+            // canvas.height = height
+            ctx.fillRect(0, 0, canvas.width, canvas.height)
+            // ctx.drawImage(image, 0, 0, width / 10, height / 10)
+            ctx.drawImage(image, 0, 0, width, height)
+            const dataUrl = canvas.toDataURL(file.type) //图片转路径
+
+            const blobData = this.dataURItoBlob(dataUrl, file.type) //图片转二进制
+            // // 进行最小压缩0.1
+            // const compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1)
+            // 压缩后调用方法进行base64转Blob，方法写在下边
+            // const blobImg = this.dataURItoBlob(blobData)
+            return blobData
+        },
+        /* base64转Blob对象 */
+        dataURItoBlob(data) {
+            let byteString
+            if (data.split(',')[0].indexOf('base64') >= 0) {
+                byteString = atob(data.split(',')[1])
+            } else {
+                byteString = unescape(data.split(',')[1])
+            }
+            const mimeString = data.split(',')[0].split(':')[1].split(';')[0]
+            const ia = new Uint8Array(byteString.length)
+            for (let i = 0; i < byteString.length; i += 1) {
+                ia[i] = byteString.charCodeAt(i)
+            }
+            return new Blob([ia], { type: mimeString })
+        },
     onLoad(page, params = {}) {
       console.log('deptName',params)
       let query = {