wenhongquan 10 kuukautta sitten
vanhempi
commit
dcc8db4163

+ 1 - 0
package.json

@@ -41,6 +41,7 @@
     "print-js": "^1.6.0",
     "qiniu-js": "3.4.2",
     "screenfull": "6.0.0",
+    "sharp": "^0.33.5",
     "vant": "^4.9.1",
     "vform3-builds": "3.0.8",
     "vue": "3.2.45",

+ 65 - 49
src/components/FileUpload/index.vue

@@ -169,7 +169,7 @@ onMounted(()=>{
 
 
 
-const customUpload = (options: UploadRequestOptions) =>{
+const customUpload = async (options: UploadRequestOptions) => {
 
   // 自定义上传方法,使用qiniu-js库进行上传
   const date = new Date();
@@ -179,54 +179,70 @@ const customUpload = (options: UploadRequestOptions) =>{
   const directory = moment().format("yyyy/MM/DD/");
 
   const fileSuffix = (options.file.name.split('.').pop() || '').toLowerCase();
-  const fileName = uuid2(16, 16)  ;
-  const key = directory + fileName+"."+fileSuffix;
-
-  const observable = qiniu.upload(options.file, key,qntoken.value );
-
-  return observable.subscribe({
-    complete(res) {
-      // 上传完成时的回调
-      const imageUrls = res.key;
-      const file_data = {
-        name: fileName+fileSuffix,
-        fileName: imageUrls,
-        url: imageUrls,
-        fileSuffix: fileSuffix,
-        size: options.file.size,
-        originalName: options.file.name
-      }
-      addfile(file_data).then(res=>{
-        uploadList.value.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId });
-        uploadedSuccessfully();
-      })
-
-      //保存到后端
-      // fileList.value.push(file_data)
-
-      // 将成功状态标记添加到文件对象中。后续测试发现不加也可以,哈哈哈。是之前直接使用this的原因。这里就不去掉了。
-      // const uploadedFileIndex = fileList.value.findIndex(file => file.url === imageUrls);
-      //使用了 findIndex 方法来找到对应文件的索引,然后将状态标记为成功。请尝试修改代码并重新测试上传功能
-      // if (uploadedFileIndex !== -1) {
-      //   console.log(uploadedFileIndex)
-      //   fileList.value[uploadedFileIndex].status = 'success';
-      // }
-
-      // uploadedSuccessfully();
-
-    },
-    next(res) {
-      // 上传过程中的回调,如果需要可以在这里处理上传进度等信息
-      // console.log(options)
-      options.onProgress({percent:res.total.percent})
-      // const progressEvt = evt as UploadProgressEvent
-      // progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
-      // option.onProgress(progressEvt)
-    },
-    error(err) {
-      // 上传出错时的回调
-    },
-  });
+  const fileName = uuid2(16, 16);
+  const key = directory + fileName + "." + fileSuffix;
+
+  const options1 = {
+    quality: 0.92,
+    noCompressIfLarger: false,
+    maxWidth: 20000,
+    maxHeight: 20000
+  }
+  try{
+
+     qiniu.compressImage(options.file, options1).then(res => {
+       debugger
+});
+  }catch (e){
+    console.log(e)
+
+  }
+
+  // const observable = qiniu.upload(options.file, key, qntoken.value);
+  //
+  // return observable.subscribe({
+  //   complete(res) {
+  //     // 上传完成时的回调
+  //     const imageUrls = res.key;
+  //     const file_data = {
+  //       name: fileName + fileSuffix,
+  //       fileName: imageUrls,
+  //       url: imageUrls,
+  //       fileSuffix: fileSuffix,
+  //       size: options.file.size,
+  //       originalName: options.file.name
+  //     }
+  //     addfile(file_data).then(res => {
+  //       uploadList.value.push({name: res.data.fileName, url: res.data.url, ossId: res.data.ossId});
+  //       uploadedSuccessfully();
+  //     })
+  //
+  //     //保存到后端
+  //     // fileList.value.push(file_data)
+  //
+  //     // 将成功状态标记添加到文件对象中。后续测试发现不加也可以,哈哈哈。是之前直接使用this的原因。这里就不去掉了。
+  //     // const uploadedFileIndex = fileList.value.findIndex(file => file.url === imageUrls);
+  //     //使用了 findIndex 方法来找到对应文件的索引,然后将状态标记为成功。请尝试修改代码并重新测试上传功能
+  //     // if (uploadedFileIndex !== -1) {
+  //     //   console.log(uploadedFileIndex)
+  //     //   fileList.value[uploadedFileIndex].status = 'success';
+  //     // }
+  //
+  //     // uploadedSuccessfully();
+  //
+  //   },
+  //   next(res) {
+  //     // 上传过程中的回调,如果需要可以在这里处理上传进度等信息
+  //     // console.log(options)
+  //     options.onProgress({percent: res.total.percent})
+  //     // const progressEvt = evt as UploadProgressEvent
+  //     // progressEvt.percent = evt.total > 0 ? (evt.loaded / evt.total) * 100 : 0
+  //     // option.onProgress(progressEvt)
+  //   },
+  //   error(err) {
+  //     // 上传出错时的回调
+  //   },
+  // });
 }
 
 // 上传前校检格式和大小

+ 19 - 5
src/components/pdfview/index.vue

@@ -5,12 +5,16 @@
       <!--      <PicShow :src="props.src" v-if="ispic && !ismobile" />-->
       <div v-if="ispic && !ismobile" style="position:relative;">
         <el-button style="position:fixed;top:15vh;left: 20px;" @click="showjb=!showjb">{{!showjb?"查看局部":"返回"}}</el-button>
-        <el-image v-if="!showjb" :src="props.src" :preview-src-list="[props.src]" :fit="'cover'" style="max-width:80%;"></el-image>
+        <el-image v-if="!showjb" :src="props.src" :preview-src-list="[props.src]"  :fit="'cover'" style="max-width:80%;">
+          <template #error>
+            <div class="image-slot">
+              <el-icon size="40"><MessageBox /></el-icon><span style="margin-left: 5px">图片太大无法查看,最大支持20000*20000的图片,请尝试压缩图片尺寸。</span>
+            </div>
+          </template>
+        </el-image>
         <PicShow v-if="showjb" :src="props.src" />
       </div>
 
-
-
       <iframe v-loading style="width:100%;height:100%;border:none" v-if="!ispic " :src="`${currentPdf}`" />
       <!--      <div style="height: 100%;overflow-y: auto" v-if="!usepdf">-->
       <!--        &lt;!&ndash; <div v-for="page in pages" :key="page" style="width: 100%;">-->
@@ -54,6 +58,10 @@ const font = ref({
   color: 'rgba(0, 0, 0, .15)',
 })
 
+const handleError=(e)=>{
+  alert(JSON.stringify(e))
+}
+
 const showjb = ref(false);
 
 const watertext = ref();
@@ -61,7 +69,6 @@ const ispic = ref(false);
 const ismobile = ref(false);
 
 
-
 const currentPdf = ref(props.src)
 watchEffect(() => {
   ispic.value = props.ispic;
@@ -111,4 +118,11 @@ onUnmounted(()=>{
 // const { pdf, pages } = usePDF(currentPdf)
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.image-slot{
+  color: red;
+  display: flex;
+  min-height: 200px;
+  align-items: center
+}
+</style>

+ 19 - 19
src/router/index.ts

@@ -68,25 +68,25 @@ export const constantRoutes: RouteOption[] = [
     component: () => import('@/views/filepreview/index.vue'),
     hidden: true
   },
-  {
-    path: '/h5',
-    hidden: true,
-    redirect: '/h5/login',
-    children: [
-      {
-        path: '/h5/login',
-        component: () => import('@/views/h5/login/index.vue')
-      },
-      {
-        path: '/h5/project',
-        component: () => import('@/views/h5/project/index.vue')
-      },
-      {
-        path: '/h5/filelist',
-        component: () => import('@/views/h5/filelist/index.vue')
-      }
-    ]
-  },
+  // {
+  //   path: '/h5',
+  //   hidden: true,
+  //   redirect: '/h5/login',
+  //   children: [
+  //     {
+  //       path: '/h5/login',
+  //       component: () => import('@/views/h5/login/index.vue')
+  //     },
+  //     {
+  //       path: '/h5/project',
+  //       component: () => import('@/views/h5/project/index.vue')
+  //     },
+  //     {
+  //       path: '/h5/filelist',
+  //       component: () => import('@/views/h5/filelist/index.vue')
+  //     }
+  //   ]
+  // },
   {
     path: '',
     component: Layout,

+ 1 - 1
src/views/filepreview/index.vue

@@ -25,7 +25,7 @@
         :size="currentfile.size"
       ></pdfview>
 
-      <div v-if="isdownload != 1" style="position:absolute;right: 0px;top: 0px;z-index: 11;width:120px;height: 50px;background: #323639"></div>
+      <div v-if="isdownload != 1 && (currentfile!=null &&( currentfile.fileSuffix+'').indexOf('pdf')!=-1)" style="position:absolute;right: 0px;top: 0px;z-index: 11;width:120px;height: 50px;background: #323639"></div>
     </div>
     <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
   </div> -->