增加文件上传组件

api/qiniu/info.js

@@ -0,0 +1,37 @@
+import request from '@/utils/request'
+
+// 查询字典数据列表
+export function listData(query) {
+  return request({
+    url: '/system/dict/data/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 新增文件列表
+export function addFileList(data) {
+  return request({
+    url: '/system/fileList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改字典数据
+export function updateData(data) {
+  return request({
+    url: '/system/dict/data',
+    method: 'put',
+    data: data
+  })
+}
+
+//获取七牛文件上传token
+export function getQNtoken(data) {
+    return request({
+      url: '/qiniufile/getQNtoken',
+      method: 'post',
+      data: data
+    })
+  }

api/system/fileList.js

@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询文件列表列表
+export function listFileList(query) {
+  return request({
+    url: '/system/fileList/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询七牛云文件域名
+export function getQNdomain() {
+  return request({
+    url: '/qiniufile/getQNdomain',
+    method: 'get'
+  })
+}
+
+// 查询文件列表详细
+export function getFileList(id) {
+  return request({
+    url: '/system/fileList/' + id,
+    method: 'get'
+  })
+}
+
+// 新增文件列表
+export function addFileList(data) {
+  return request({
+    url: '/system/fileList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改文件列表
+export function updateFileList(data) {
+  return request({
+    url: '/system/fileList',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除文件列表
+export function delFileList(id) {
+  return request({
+    url: '/system/fileList/' + id,
+    method: 'delete'
+  })
+}

config.js

@@ -1,9 +1,11 @@
 // 应用全局配置
 export default {
+  qnDomain: 'http://sdcwwvrwz.hn-bkt.clouddn.com/',
+  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://localhost:8080',
-   baseUrl: 'http://192.168.123.81:8080',
+  // baseUrl: 'http://192.168.123.81:8080',
    // baseUrl: 'http://47.93.242.168:8080',
   // 应用信息
   appInfo: {

main.js

@@ -2,7 +2,7 @@ import { createSSRApp } from 'vue'
 import App from './App'
 import store from './store' // store
 import { install } from './plugins' // plugins
-import './permission' // permission
+import './permission.js' // permission
 // main.js
 import uviewPlus from 'uview-plus'
 

package.json

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

pages/common/file/fileUpload/index.vue

@@ -0,0 +1,169 @@
+<template>
+    <view>
+        <up-upload
+        :accept="fileTypeInfo"
+        :maxCount="limit"
+	:fileList="fileList1"
+	@afterRead="afterRead"
+	@delete="deletePic"
+    :maxSize="fileSize"
+	name="fileInfowx"
+	multiple
+	:previewFullImage="true"
+></up-upload>
+    </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';
+
+const emit = defineEmits();
+const { proxy } = getCurrentInstance();
+const uploadQiNiuDomain = config1.uploadQiNiuDomain;
+
+const props = defineProps({
+  fileTypeInfo: {
+    type: String,
+    default: "image",
+  },
+  limit: {
+    type: Number,
+    default: 6,
+  },
+  fileSize: {
+    type: Number,
+    default: 50 * 1024 * 1024,
+  },
+});
+
+const url = ref('');
+const fileList1 = ref([]);
+const store = useStore();
+const dataToken = reactive({
+  token: '',
+  key: ''
+});
+const fileInfo = reactive({
+  name: '',
+  type: '',
+  extension: ''
+});
+const config = reactive({
+  useCdnDomain: true,
+  region: qiniu.region.z2,
+  checkByMD5: true,
+  forceDirect: true
+});
+const putExtra = reactive({});
+const form = reactive({
+  id: null,
+  configId: null,
+  name: null,
+  path: null,
+  url: null,
+  type: null,
+  fileCategory: null,
+  size: null,
+  creator: null,
+  createTime: null,
+  updater: null,
+  updateTime: null,
+  deleted: null
+});
+
+// 新增图片
+const afterRead = async (event) => {
+  let name = event.name;
+  let lists = [].concat(event.file);
+  let fileListLen = fileList1.value.length;
+  lists.forEach(item => {
+    fileList1.value.push({
+      ...item,
+      status: 'uploading',
+      message: '上传中',
+    });
+  });
+  for (let i = 0; i < lists.length; i++) {
+    try {
+      const result = await uploadFilePromise(lists[i], name);
+      let item = fileList1.value[fileListLen];
+      fileList1.value.splice(fileListLen, 1, {
+        ...item,
+        status: 'success',
+        message: '',
+        url: store.state.user.QNDomain+result,
+        furl:result
+      });
+      console.log("返回的数据:", store.state.user.QNDomain+result);
+      emit('fileList', fileList1.value);
+      fileListLen++;
+    } catch (error) {
+      console.error("上传失败:", error);
+    }
+  }
+};
+
+const uploadFilePromise = async (fileInfo1, name) => {
+  fileInfo.name = store.state.user.phoneType + "_" + name;
+  let extension1 = fileInfo1.url.split('.');
+  fileInfo.type = fileInfo1.type + "/" + extension1[1];
+  fileInfo.extension = extension1[1];
+  try {
+    const tokenData = await getQNtoken(fileInfo);
+    dataToken.token = tokenData.QNtoken;
+    dataToken.key = tokenData.key;
+    const result = await uploadQN(fileInfo1.url);
+    return result;
+  } catch (error) {
+    console.error("获取 token 或上传失败:", error);
+    throw error;
+  }
+};
+
+const uploadQN = (file) => {
+  return new Promise((resolve, reject) => {
+    uni.uploadFile({
+      url: uploadQiNiuDomain,
+      filePath: file,
+      name: 'file',
+      formData: {
+        'key': dataToken.key,
+        'token': dataToken.token
+      },
+      success: async (e) => {
+        try {
+          let data = JSON.parse(e.data);
+          form.url = data.key;
+          form.name = data.key;
+          form.type = data.fileType;
+          form.size = data.fsize;
+          await addFileList(form);
+          resolve(form.url);
+        } catch (error) {
+          console.error("处理上传成功响应时出错:", error);
+          reject(error);
+        }
+      },
+      fail: (e) => {
+        console.log("上传失败:", e);
+        reject(e);
+      }
+    });
+  });
+};
+
+const deletePic = (e) => {
+  fileList1.value.splice(e.index, 1);
+};
+
+const typeInfo = () => {
+  store.dispatch('getPhoneType');
+};
+
+typeInfo();
+</script>
+<style lang="scss" scoped>
+</style>

pages/index.vue

@@ -216,7 +216,7 @@
 			}
 		},
 		onLoad() {
-
+			console.log(this.$store.state.user.QNDomain);
 		},
 		methods: {
 			toEarch() {

pages/loginInfo/login.vue

@@ -83,9 +83,9 @@ const wxLoginInto = async (code) => {
 const loginSuccess = async () => {
   try {
     await store.dispatch('GetInfo')
-   
+    await store.dispatch('getQNDomainInfo')
     proxy.$tab.reLaunch('/pages/index');
-    await store.dispatch('GetUserInfo');
+   // await store.dispatch('GetUserInfo');
   } catch (error) {
     console.log("获取用户信息失败", error)
   }
@@ -94,7 +94,7 @@ const loginSuccess = async () => {
 const getPhoneNumber = async (e) => {
   console.log(e)
   if (e.detail.errMsg != "getPhoneNumber:ok") {
-    proxy.$modal.msgError(`cuowu错误!`);
+    proxy.$modal.msgError(`phoneNumber错误!`);
     return '';
   }
   try {
@@ -171,8 +171,12 @@ function validatePhoneNumber(phoneNumber) {
 
 function getPlat() {
   type.value = uni.getSystemInfoSync().uniPlatform
+  store.dispatch('getPhoneType').then(e=> {
+    type.value = store.state.user.phoneType
+  })
   console.log("当前环境是：", type.value);
 
+
 }
 getPlat();
 

pages/work/index.vue

@@ -71,16 +71,28 @@
         </uni-grid-item>
       </uni-grid>
     </view>
+    <fileUpload @fileList="handleFileList"></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>
+      </view>
+    </view>
+
   </view>
 </template>
 
-<script>
+<script setup>
-export default {
+import fileUpload from './../common/file/fileUpload/index.vue'
-  data() {
+import {ref, reactive} from 'vue'
-    return {
+import { useStore } from 'vuex';
-      current: 0,
+const store = useStore();
-      swiperDotIndex: 0,
+
-      data: [{
+const QNDomain = store.state.user.QNDomain
+     const current = ref(0)
+     const swiperDotIndex = ref(0)
+
+     const  data = ref( [{
         image: '/static/images/banner/banner01.jpg'
       },
       {
@@ -89,21 +101,23 @@ export default {
       {
         image: '/static/images/banner/banner03.jpg'
       }
-      ]
+      ])
-    }
+      const fileList1 = ref([])
-  },
+const  handleFileList = (newFileList) => {
-  methods: {
+  fileList1.value = newFileList;
-    clickBannerItem(item) {
+  console.log('Updated fileList:', fileList1.value);
+}
+
+   function clickBannerItem(item) {
       console.info(item)
-    },
+    }
-    changeSwiper(e) {
+    function changeSwiper(e) {
-      this.current = e.detail.current
+      current.value = e.detail.current
-    },
+    }
-    changeGrid(e) {
+    function changeGrid(e) {
       this.$modal.showToast('模块建设中~')
     }
-  }
+
-}
 </script>
 
 <style lang="scss">

permission.js

@@ -15,26 +15,27 @@ function checkWhite(url) {
 }
 
 // 页面跳转验证拦截器
-// let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
+let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"]
-// list.forEach(item => {
+list.forEach(item => {
-//   uni.addInterceptor(item, {
+  uni.addInterceptor(item, {
-//     invoke(to) {
+    invoke(to) {
-//       if (getToken()) {
+
-//         if (to.url === loginPage) {
+      if (getToken()) {
-//           console.log("to:",to);
+        if (to.url === loginPage) {
-//           uni.reLaunch({ url: "/" })
+          console.log("to:",to);
-//         }
+          uni.reLaunch({ url: "/" })
-//         return true
+        }
-//       } else {
+        return true
-//         if (checkWhite(to.url)) {
+      } else {
-//           return true
+        if (checkWhite(to.url)) {
-//         }
+          return true
-//         uni.reLaunch({ url: loginPage })
+        }
-//         return false
+        uni.reLaunch({ url: loginPage })
-//       }
+        return false
-//     },
+      }
-//     fail(err) {
+    },
-//       console.log("错误信息：",err)
+    fail(err) {
-//     }
+      console.log("错误信息：",err)
-//   })
+    }
-// })
+  })
+})

store/modules/user.js

@@ -5,8 +5,9 @@ import { login, logout, getInfo } from "@/api/login";
 import { getToken, setToken, removeToken } from "@/utils/auth";
 import defaultAvatar from "@/static/images/profile.jpg";
 import { loginByWX, loginByWXPhone,PhoneCodeLogin } from "@/api/system/logins";
+import {getQNdomain} from '@/api/system/fileList';
 const baseUrl = config.baseUrl;
-
+const qnDomain = config.qnDomain;
 const user = {
   state: {
     token: getToken(),
@@ -16,6 +17,8 @@ const user = {
     avatar: storage.get(constant.avatar),
     roles: storage.get(constant.roles),
     permissions: storage.get(constant.permissions),
+    QNDomain: storage.get(constant.QNDomain) || qnDomain,
+    phoneType:storage.get(constant.phoneType)
   },
 
   mutations: {
@@ -46,6 +49,14 @@ const user = {
       state.permissions = permissions;
       storage.set(constant.permissions, permissions);
     },
+    SET_QNDOMIAN: (state, QNDomain) => {
+      state.QNDomain = QNDomain;
+      storage.set(constant.QNDomain, QNDomain);
+    },
+    SET_PHONETYPE: (state, phoneType) => {
+      state.phoneType = phoneType;
+      storage.set(constant.phoneType, phoneType);
+    }
   },
 
   actions: {
@@ -148,6 +159,19 @@ const user = {
           });
       });
     },
+    //获取七牛云配置域名
+    getQNDomainInfo({ commit, state }) {
+      getQNdomain().then((e) => {
+        if (e.domain && e.domain !== qnDomain) {
+          commit("SET_QNDOMIAN", e.domain);
+          commit("SET_AVATAR", e.domain + state.avatar);
+        }
+      });
+    },
+        //获取当前登录设备的信息
+        getPhoneType({ commit, state }) {
+          commit("SET_PHONETYPE",uni.getSystemInfoSync().uniPlatform );
+        },
 
     // 退出系统
     LogOut({ commit, state }) {