增加文件上传组件

config.js

@@ -4,7 +4,7 @@ export default {
   uploadQiNiuDomain: 'https://upload-z2.qiniup.com',
  // baseUrl: 'https://vue.ruoyi.vip/prod-api',
   // baseUrl: 'http://47.93.242.168:8080',
-    baseUrl: 'http://localhost:8080',
+    baseUrl: 'http://47.93.242.168:8080',
   // baseUrl: 'http://192.168.123.81:8080',
    // baseUrl: 'http://47.93.242.168:8080',
   // 应用信息

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "clipboard": "^2.0.11",
     "dayjs": "^1.11.11",
+    "qiniu": "^7.12.0",
     "qiniu-js": "^3.4.2",
     "uview-plus": "^3.2.15"
   }

pages/common/file/fileUpload/index.vue

@@ -1,24 +1,25 @@
 <template>
-    <view>
+  <view>
-        <up-upload
+    <up-upload
-        :accept="fileTypeInfo"
+      :accept="fileTypeInfo"
-        :maxCount="limit"
+      :maxCount="limit"
-	:fileList="fileList1"
+      :fileList="fileList1"
-	@afterRead="afterRead"
+      @afterRead="afterRead"
-	@delete="deletePic"
+      @delete="deletePic"
-    :maxSize="fileSize"
+      :maxSize="fileSize"
-	name="fileInfowx"
+      name="fileInfowx"
-	multiple
+      multiple
-	:previewFullImage="true"
+      :previewFullImage="true"
-></up-upload>
+    ></up-upload>
-    </view>
+  </view>
 </template>
+
 <script setup>
-import * as qiniu from 'qiniu-js';
 import { getQNtoken, addFileList } from "@/api/qiniu/info";
 import config1 from "@/config";
 import { ref, reactive, getCurrentInstance, defineEmits } from 'vue';
 import { useStore } from 'vuex';
+import * as qiniu from 'qiniu-js'
 
 const emit = defineEmits();
 const { proxy } = getCurrentInstance();
@@ -35,7 +36,7 @@ const props = defineProps({
   },
   fileSize: {
     type: Number,
-    default: 50 * 1024 * 1024,
+    default: 100 * 1024 * 1024,
   },
 });
 
@@ -55,7 +56,7 @@ const config = reactive({
   useCdnDomain: true,
   region: qiniu.region.z2,
   checkByMD5: true,
-  forceDirect: true
+  forceDirect: false
 });
 const putExtra = reactive({});
 const form = reactive({
@@ -76,7 +77,7 @@ const form = reactive({
 
 // 新增图片
 const afterRead = async (event) => {
-  console.log("event:",event)
+  console.log("event:", event);
   let name = event.name;
   let lists = [].concat(event.file);
   let fileListLen = fileList1.value.length;
@@ -95,8 +96,8 @@ const afterRead = async (event) => {
         ...item,
         status: 'success',
         message: '',
-        url: store.state.user.QNDomain+result,
+        url: store.state.user.QNDomain + result,
-        furl:result
+        furl: result
       });
       emit('fileList', fileList1.value);
       fileListLen++;
@@ -107,17 +108,17 @@ const afterRead = async (event) => {
 };
 
 const uploadFilePromise = async (fileInfo1, name) => {
-  console.log("fileInfo1:",fileInfo1.name)
+  // 主要目的的拼名字，大小，类型
-  let fileNameOld = [0,1]
+  let fileNameOld = [0, 1];
-  if(fileInfo1.name !== undefined){
+  if (fileInfo1.name !== undefined) {
-     fileNameOld = fileInfo1.name.split('.')
+    fileNameOld = fileInfo1.name.split('.');
   }
 
-  fileInfo.name =fileNameOld[0]+"_"+ store.state.user.phoneType + "_" + name;
+  fileInfo.name = fileNameOld[0] + "_" + store.state.user.phoneType + "_" + name;
   let extension1 = fileInfo1.url.split('.');
-  //防止h5报错
+  // 防止 h5 报错
-  if(extension1[1] == null){
+  if (extension1[1] == null) {
-    extension1[1] = fileNameOld[1]
+    extension1[1] = fileNameOld[1];
   }
   fileInfo.type = fileInfo1.type + "/" + extension1[1];
   fileInfo.extension = extension1[1];
@@ -125,25 +126,49 @@ const uploadFilePromise = async (fileInfo1, name) => {
     const tokenData = await getQNtoken(fileInfo);
     dataToken.token = tokenData.QNtoken;
     dataToken.key = tokenData.key;
-    const result = await uploadQN(fileInfo1.url);
+
+    const result = await uploadQN(fileInfo1);
     return result;
   } catch (error) {
     console.error("获取 token 或上传失败:", error);
     throw error;
   }
 };
-const observer = {
+
-  next(res){
-    console.log("next:",res)
-  },
-  error(err){
-    console.log("error:",err)
-  },
-  complete(res){
-    console.log("complete:",res)
-  }
-}
 const uploadQN = (file) => {
+  // if (store.state.user.phoneType === 'mp-weixin') {
+  //   return uploadQN1(file.url);
+  // } else {
+  //   return uploadQN2(file);
+  // }
+  return uploadQN1(file.url);
+};
+//废弃
+const uploadQN2 = (file) => {
+  return new Promise((resolve, reject) => {
+    const observable = qiniu.upload(file, dataToken.key, dataToken.token, putExtra, config);
+    const subscription = observable.subscribe({
+      next(res) {
+        console.log("next:", res);
+      },
+      error(err) {
+        console.log("error:", err);
+        reject(err);
+      },
+      async complete(res) {
+        console.log("complete:", res);
+        form.url = res.key;
+        form.name = res.key;
+        form.type = res.mimeType;
+        form.size = res.fsize;
+        await addFileList(form);
+        resolve(res.key);
+      }
+    });
+  });
+};
+//调用uni上传方法
+const uploadQN1 = (file) => {
   return new Promise((resolve, reject) => {
     uni.uploadFile({
       url: uploadQiNiuDomain,
@@ -181,9 +206,11 @@ const deletePic = (e) => {
 
 const typeInfo = () => {
   store.dispatch('getPhoneType');
+  console.log(store.state.user.phoneType);
 };
 
 typeInfo();
 </script>
+
 <style lang="scss" scoped>
 </style>

pages/work/index.vue

@@ -71,8 +71,8 @@
         </uni-grid-item>
       </uni-grid>
     </view>
-    <fileUpload @fileList="handleFileList"    ></fileUpload>
+    <fileUpload @fileList="handleFileList"  :fileTypeInfo="fileTypeInfo1"  ></fileUpload>
-
+    <fileUpload @fileList="handleFileList"  :fileTypeInfo="fileTypeInfo2"  ></fileUpload>
     <view class="album" v-for="(item,index) in fileList1" :key="index">
       <view class="album__avatar">
         <image :src="QNDomain+item.furl" mode="" style="width: 32px;height: 32px;"></image>
@@ -84,10 +84,12 @@
 
 <script setup>
 import fileUpload from './../common/file/fileUpload/index.vue'
-import {ref, reactive} from 'vue'
+import {ref, reactive,getCurrentInstance} from 'vue'
 import { useStore } from 'vuex';
+const { proxy } = getCurrentInstance();
 const store = useStore();
-const fileTypeInfo = ref("images,video")
+const fileTypeInfo1 = ref("image")
+const fileTypeInfo2 = ref("file")
 const QNDomain = store.state.user.QNDomain
      const current = ref(0)
      const swiperDotIndex = ref(0)
@@ -115,7 +117,7 @@ const  handleFileList = (newFileList) => {
       current.value = e.detail.current
     }
     function changeGrid(e) {
-      this.$modal.showToast('模块建设中~')
+      proxy.$modal.showToast('模块建设中~')
     }
 
 </script>