我有一个带有 onMount 的组件(userprofile)来加载用户配置文件图片,我有另一个组件(updatePic)来更新用户配置文件图片,我希望用户图片在 userprofile 组件上更新时在 updatePic 组件上立即更改。现在我尝试使用可写存储,但它不起作用,当我为反应性添加 $ 时,我得到错误“订阅不是函数”。
用户配置文件组件
<script>
import Updatpic from '../../lib/components/userprivat/updatePic.svelte';
import { uPic } from '../../lib/stores/uPic.js';
import { onMount } from 'svelte';
let meData;
let skil =[];
let picU;
let pics;
uPic.subscribe(newpic => {
picU = newpic;
});
let picLink;
onMount(async () => {
const parseJSON = (resp) => (resp.json ? resp.json() : resp);
const checkStatus = (resp) => {
if (resp.status >= 200 && resp.status < 300) {
return resp;
}
return parseJSON(resp).then((resp) => {
throw resp;
});
};
const headers = {
'Content-Type': 'application/json'
};
try {
const res = await fetch(link, {
method: 'GET',
headers: {
'Authorization': bearer1,
'Content-Type': 'application/json'
},
}).then(checkStatus)
.then(parseJSON);
meData = res
console.log(res);
pics = meData.profilePic.formats.small.url;
uPic.set(meData.profilePic.formats.small.url);
picLink = "http://localhost:5000" + picU;
} catch (e) {
error1 = e
}
});
picLink = "http://localhost:5000" + picU;
let updpic = 0;
</script>
{#if picU}
<div class="middle">
<img
width="250" height="250"
style="border-radius: 50%; margin-right:auto; margin-left:auto ;"
src={picLink}
alt="profilePic"></div>
<div class="name1">
<button
on:click={() => updpic = 1}
style=" margin-right:auto; margin-left:auto ;"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">עדכון תמונת פרופיל</button>
{#if updpic == 1} <Updatpic/>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-1 rounded" on:click={() => updpic = 0}>ביטול</button>
{/if}</div>
{:else}
<div class="middle">
<button
on:click={() => addpic = 1}
style=" margin-right:auto; margin-left:auto ;"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">העלאת תמונת פרופיל</button>
{#if addpic == 1} <Addnewp/>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-1 rounded"
on:click={() => addpic = 0}>ביטול</button>
{/if}
</div>
{/if}
更新图片组件
import { uPic } from '../../stores/uPic.js';
import axios from 'axios';
let url1 = "http://localhost:5000/upload";
let picU;
uPic.subscribe(newpic => {
picU = newpic;
})
let meData;
let link ="http://localhost:5000/users/" + idLi ;
let files;
function sendP () {
let fd = new FormData();
fd.append('files', files[0]);
axios
.post( url1, fd ,{
headers: {
Authorization: bearer1,
},
})
.then(({ data }) => {
const imageId = data[0].id;
axios
.post(link, {
profilePic: imageId,
},
{
headers: {
'Authorization': bearer1
}})
.then(response => {
console.log('הצליח', response.data);
meData = res;
uPic.set(meData.profilePic.formats.small.url);
})
.catch(error => {
console.log('צריך לתקן:', error.response);
});
console.log("hh")
})};
</script>
<div dir="rtl" class="flex content-center ">
<label for="avatar">בחירת תמונה</label>
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg"
bind:files={files}
>
<button on:click={sendP} class="bg-blue-500 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">העלאה</button>
</div>
uPic.js
import { writable } from 'svelte/store';
export const uPic = writable();
export const updateuPic = () => {
uPic.set()
};