This commit is contained in:
虾壳
parent
0c1bceb97b
commit
ea9d06a5ad
|
|
@ -0,0 +1,18 @@
|
|||
import httpInstance from '@/utils/http'
|
||||
|
||||
export const uploadImage = (file) => {
|
||||
// 创建一个 FormData 对象
|
||||
const formData = new FormData();
|
||||
// 将文件添加到 FormData
|
||||
formData.append('file', file);
|
||||
|
||||
// 发送 POST 请求
|
||||
return httpInstance({
|
||||
url: `/QiNiu/upload`,
|
||||
method: "post",
|
||||
data: formData, // 将 FormData 对象作为请求体
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -33,6 +33,6 @@ export const updateUserInfo= (user)=>{
|
|||
return http.request({
|
||||
url:"/user/update",
|
||||
method:"post",
|
||||
params:user
|
||||
data:user
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="img-upload">
|
||||
<input v-show="0 != 0" ref="input" type="file" name="image" accept="image/*" @change="upload" :v-model="file">
|
||||
<!-- <el-button type="" @click="uploadClick">上传</el-button> -->
|
||||
<!-- <div v-if="imageUrl == ''" class="img-upload-box" @click="uploadClick">
|
||||
<p>+</p>
|
||||
</div> -->
|
||||
<!-- <img class="img-img" v-if="imageUrl!=''" :src="imageUrl" alt="" style="height: 100%;"> -->
|
||||
<el-image class="img-img" v-if="imageUrl != ''" style="height:100%" :src="imageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
|
||||
:preview-src-list="[imageUrl]" fit="cover" />
|
||||
<el-button v-if="imageUrl != ''" type="primary" class="img-button" @click="uploadClick">修改头像</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.img-upload {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.img-img:hover + .img-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img-button{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin-bottom: 10px;
|
||||
display: none;
|
||||
}
|
||||
.img-upload-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { uploadImage } from '@/api/upload/upload';
|
||||
import { ref, watch } from 'vue';
|
||||
// 抛出事件
|
||||
const emit = defineEmits(['upload']);
|
||||
const props=defineProps({
|
||||
img:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
})
|
||||
watch(props.img,(newV)=>{
|
||||
if(newV!=null){
|
||||
console.log("传入了图片")
|
||||
imageUrl.value=newV;
|
||||
}
|
||||
},{
|
||||
deep: true})
|
||||
// const
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
//文件对象
|
||||
const file = ref(null);
|
||||
//上传框dom
|
||||
const input = ref(null);
|
||||
//图片url
|
||||
const imageUrl = ref('');
|
||||
//点击开启上传
|
||||
const uploadClick = () => {
|
||||
input.value.click();
|
||||
}
|
||||
//上传
|
||||
const toUploadImage = async () => {
|
||||
let res = await uploadImage(file.value);
|
||||
if (res.code == 1) {
|
||||
//成功
|
||||
return res.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
const upload = async (e) => {
|
||||
let imgMaxSize = 1024 * 1024 * 4;
|
||||
if (e.target.files[0].size > imgMaxSize) {
|
||||
alert("图片大小不能超过4M");
|
||||
return;
|
||||
}
|
||||
if (['jpeg', 'png', 'gif', 'jpg'].indexOf(e.target.files[0].type.split("/")[1]) < 0) {
|
||||
//用你选择组件的报错弹窗就行，报出以下提醒
|
||||
alert("上传的文件必须是图片格式");
|
||||
return;
|
||||
}
|
||||
file.value = e.target.files[0];
|
||||
// alert("上传文件");
|
||||
let url = await toUploadImage();
|
||||
if (url != null) {
|
||||
imageUrl.value = url;
|
||||
emit('upload', url);
|
||||
} else {
|
||||
alert("上传失败");
|
||||
}
|
||||
}
|
||||
const updateUrl=(img)=>{
|
||||
file.value=null;
|
||||
if(img==null){
|
||||
imageUrl.value='';
|
||||
return ;
|
||||
}
|
||||
imageUrl.value=img;
|
||||
}
|
||||
//暴露方法
|
||||
defineExpose(
|
||||
{
|
||||
updateUrl
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
|
@ -2,34 +2,21 @@
|
|||
<div class="nav">
|
||||
<div class="logo-box"><span class="loogText">Xuaua</span></div>
|
||||
<div>
|
||||
<div class="search-box">
|
||||
<!-- <el-input type="text" prefix-icon="el-icon-search" style="height: 38px;" class="search-input" placeholder="搜索关键词" v-model="selectType">
|
||||
|
||||
</el-input> -->
|
||||
<el-input
|
||||
v-model="input3"
|
||||
style="max-width: 600px"
|
||||
placeholder="搜索关键词"
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-button :icon="Search" />
|
||||
</template>
|
||||
</el-input>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<el-popover :width="700" trigger="click">
|
||||
<template #reference>
|
||||
<!-- <div class="selectInput">
|
||||
<div class="search-box">
|
||||
<div class="selectInput">
|
||||
<div @click="selectClick">
|
||||
<el-icon :size="size" :color="color">
|
||||
<Search />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div> -->
|
||||
<input type="text" placeholder="搜索关键词" v-model="type" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<TypeSelect @select="selectInput"></TypeSelect>
|
||||
<TypeSelect @select="selectInput" :type="type"></TypeSelect>
|
||||
</el-popover>
|
||||
</div>
|
||||
<div @click="router.push('/user')" class="user-avatar">
|
||||
|
|
@ -39,12 +26,29 @@
|
|||
</template>
|
||||
<script setup>
|
||||
// import {defineProps} from "vue"
|
||||
import { ElMessage } from "element-plus";
|
||||
import TypeSelect from "@/components/TypeSelect.vue";
|
||||
import { debounceRef } from "@/utils/debounceRef";
|
||||
import { ref } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
const type = debounceRef('', 500);
|
||||
</script>
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
.selectInput {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 2px #000000 solid;
|
||||
border-radius: 30px;
|
||||
input {
|
||||
background-color: #00000000; /* 透明背景 */
|
||||
border: none; /* 无边框 */
|
||||
outline: none; /* 去除聚焦时的轮廓 */
|
||||
padding: 0; /* 无内边距 */
|
||||
margin: 0; /* 无外边距 */
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
// import { ref, computed } from 'vue'
|
||||
// import { defineStore } from 'pinia'
|
||||
|
||||
// export const useCounterStore = defineStore('useTopicBox', () => {
|
||||
// const index = ref(1);
|
||||
// const Topics=ref([]);
|
||||
// const count = computed(()=>Topics.value.length);
|
||||
// return { count, doubleCount, increment }
|
||||
// })
|
||||
Loading…
Reference in New Issue