talk
/
talk_appAmin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加文件上传组件

main
26947 2024-05-24 23:20:46 +08:00
parent 5bf99bedcc
commit 781d04dc10
11 changed files with 354 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
api/qiniu/info.js Normal file
View File

@ -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
})
}

52
api/system/fileList.js Normal file
View File

@ -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'
})
}

6
config.js
View File

@ -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://192.168.123.81:8080',
baseUrl: 'http://localhost:8080',
// baseUrl: 'http://192.168.123.81:8080',
// baseUrl: 'http://47.93.242.168:8080',
// 应用信息
appInfo: {

2
main.js
View File

@ -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'

1
package.json
View File

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

169
pages/common/file/fileUpload/index.vue Normal file
View File

@ -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>

2
pages/index.vue
View File

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

10
pages/loginInfo/login.vue
View File

@ -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();

52
pages/work/index.vue
View File

@ -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>
export default {
data() {
return {
current: 0,
swiperDotIndex: 0,
data: [{
<script setup>
import fileUpload from './../common/file/fileUpload/index.vue'
import {ref, reactive} from 'vue'
import { useStore } from 'vuex';
const store = useStore();
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'
}
]
}
},
methods: {
clickBannerItem(item) {
])
const fileList1 = ref([])
const handleFileList = (newFileList) => {
fileList1.value = newFileList;
console.log('Updated fileList:', fileList1.value);
}
function clickBannerItem(item) {
console.info(item)
},
changeSwiper(e) {
this.current = e.detail.current
},
changeGrid(e) {
}
function changeSwiper(e) {
current.value = e.detail.current
}
function changeGrid(e) {
this.$modal.showToast('模块建设中~')
}
}
}
</script>
<style lang="scss">

47
permission.js
View File

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

26
store/modules/user.js
View File

@ -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 }) {