本節實現了從本地上傳圖片至WordPress媒體庫和從媒體庫中選擇圖片的功能，并進一步探究了后續文章發展節奏
承接上文，在常用選項中，圖片上傳和選擇功能用的較多，本節來實現這一功能，我們著重討論功能實現，更多美化樣式以及優化性能問題，可自行探索。此處為了便于大家理解，代碼言簡意賅。
預覽
需求如下
- 提供一個圖片上傳按鈕
- 可展示選中的圖片
- 提供清空圖片按鈕
流程如下
效果如下
修改 index.js
存儲圖片鏈接值
我們添加鍵 dataImage 用于存儲選中圖片的鏈接
//存儲選項值
const datas = Vue.reactive({
dataImage: "",
});在獲取選項數據時進行賦值，這里，我修改了原來的函數名為 get_option ，更加簡潔易懂。
//獲取數據
const get_option = () => {
axios
.post(dataLocal.route + "pf/v1/get_option", datas, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "application/json",
},
})
.then((response) => {
//省略
datas.dataImage = data.dataImage;
})
.catch((error) => {
window.alert("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
console.log(error);
});
};添加圖片上傳功能
我們通過以下兩個函數，實現圖片上傳功能
//上傳圖片
const upload_img = (file) => {
const formData = new FormData();
formData.append("file", file);
return axios
.post(dataLocal.route + "wp/v2/media", formData, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
// 圖片上傳成功后的處理邏輯
const data = response.data;
//返回圖片URL
return data.source_url;
})
.catch((error) => {
console.error(error);
// 圖片上傳失敗后的處理邏輯
});
};
//處理圖片上傳事件
const update_img = (event) => {
const file = event.target.files[0];
upload_img(file).then((url) => {
//將拿到的圖片URL傳給圖片變量
datas.dataImage = url;
});
};添加清空功能
添加以下代碼，實現清空功能
//清空選擇圖片
const clear_img = () => {
datas.dataImage = "";
};添加展示模版
為了模版可以拿到對應的功能，記得將需要的功能函數返回出來。
return {
datas,
siteData,
update_option,
update_img,
clear_img,
};模版代碼如下
<input type="file" @change.native="update_img"><br/>
<button type="button" @click="clear_img">清理</button><br/>
<img style="width: 300px;height: auto;" :src=datas.dataImage v-if =datas.dataImage ><hr/>此時刷新頁面，嘗試選擇圖片并保存，即可看到我們完成了圖片上傳功能，清理按鈕也能正常工作，記得修改選項后點擊保存按鈕。
選擇媒體庫文件
修改 index.js 文件
流程
- 創建函數，通過REST API 從WordPress 媒體庫中獲取圖片數據
- vue將獲取的圖片數據展示在前端，并提供選擇按鈕
- 選中圖片后，將值傳給選項值
- 保存
效果
創建變量
我們創建變量用于存儲獲取的圖片信息，為了便于擴展，這里使用reactive
//存儲獲取的值
const getData = Vue.reactive({
//存儲獲取的媒體庫值
mediaList: [],
});添加新選項
//存儲選項值
const datas = Vue.reactive({
//省略
dataSelectedImage: "",
});獲取數據也得加上
//獲取數據
const get_option = () => {
axios
.post(dataLocal.route + "pf/v1/get_option", datas, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "application/json",
},
})
.then((response) => {
//省略
datas.dataSelectedImage = data.dataSelectedImage;
})
.catch((error) => {
window.alert("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
console.log(error);
});
};獲取媒體庫圖片
通過以下函數獲取圖片信息并存儲信息進鍵 mediaList 中
//獲取媒體庫圖片
const getMediaList = () => {
axios
.get(dataLocal.route + "wp/v2/media")
.then((response) => {
getData.mediaList = response.data;
})
.catch((error) => {
console.error(error);
});
};選擇媒體庫圖片
添加以下代碼進行選擇
//從媒體庫選中圖片
const selectImage = (imageUrl) => {
datas.dataSelectedImage = imageUrl;
};添加模版
將模版用的數據進行導出
return {
datas,
siteData,
update_option,
update_img,
clear_img,
selectImage,
getMediaList,
getData,
};添加模版內容
<button @click="getMediaList">獲取媒體庫圖片</button>
<div style="max-width: 800px;;display: flex; margin: 1em 0;">
<div v-for="media in getData.mediaList" :key="media.id" style="float: left;">
<img :src="media.source_url" style="max-width: 150px; height: auto;vertical-align: top; ">
<button @click="selectImage(media.source_url)">選擇</button>
</div>
</div>
<h2>{{datas.dataSelectedImage ? "已" : "未"}}選擇圖片</h2>
<img :src="datas.dataSelectedImage" v-if="datas.dataSelectedImage" style="width: 150px;height: auto;"><hr/>獲取選項值
在php 中，可通過以下方法獲取選項值
echo "<br/>";
echo get_option('dataImage');
echo "<br/>";
echo get_option('dataSelectedImage');改進
上述代碼還有很多改進空間，此處為便于演示以及篇幅原因，僅敘于此。
以下是幾個可以優化的點
- 選中圖片后無需上傳至WordPress即可預覽，點擊保存按鈕后再上傳圖片，
- 若圖片選項有值，則使用上傳后的圖片鏈接進行圖片預覽
- 優化清理按鈕，或做成組件，可復用
本地圖片預覽功能
const datas = Vue.reactive({
dataImage: "",
});
const update_img = (event) => {
const file = event.target.files[0];
const formData = new FormData();
//預覽圖片
datas.dataImage = URL.createObjectURL(file);
}
<input type="file" @change.native="update_img"><br/>
<img style="width: 300px;height: auto;" :src=datas.dataImage ><hr/>完整代碼
//vite/dist/index.js
//console.log(dataLocal.route);
//console.log(dataLocal.data.user);
const App = {
setup() {
//存儲傳來的值
const siteData = dataLocal.data;
//存儲獲取的值
const getData = Vue.reactive({
//存儲獲取的媒體庫值
mediaList: [],
});
//存儲選項值
const datas = Vue.reactive({
dataOne: "",
dataTwo: "",
dataName: [],
dataImage: "",
dataSelectedImage: "",
});
//獲取數據
const get_option = () => {
axios
.post(dataLocal.route + "pf/v1/get_option", datas, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "application/json",
},
})
.then((response) => {
const data = response.data;
datas.dataOne = data.dataOne;
datas.dataTwo = data.dataTwo;
datas.dataName = data.dataName;
datas.dataImage = data.dataImage;
datas.dataSelectedImage = data.dataSelectedImage;
})
.catch((error) => {
window.alert("連接服務器失敗或后臺讀取出錯！數據讀取失敗");
console.log(error);
});
};
//保存數據
const update_option = () => {
console.log(datas);
axios
.post(dataLocal.route + "pf/v1/update_option", datas, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
},
})
.then((response) => {
alert("保存成功");
})
.catch((error) => {
alert("保存失敗");
console.log(error);
});
};
//上傳圖片
const upload_img = (file) => {
const formData = new FormData();
formData.append("file", file);
return axios
.post(dataLocal.route + "wp/v2/media", formData, {
headers: {
"X-WP-Nonce": dataLocal.nonce,
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
// 圖片上傳成功后的處理邏輯
const data = response.data;
//返回圖片URL
return data.source_url;
})
.catch((error) => {
console.error(error);
// 圖片上傳失敗后的處理邏輯
});
};
//處理圖片上傳事件
const update_img = (event) => {
const file = event.target.files[0];
upload_img(file).then((url) => {
//將拿到的圖片URL傳給圖片變量
datas.dataImage = url;
});
};
//清空選擇圖片
const clear_img = () => {
datas.dataImage = "";
};
//獲取媒體庫圖片
const getMediaList = () => {
axios
.get(dataLocal.route + "wp/v2/media")
.then((response) => {
getData.mediaList = response.data;
})
.catch((error) => {
console.error(error);
});
};
//從媒體庫選中圖片
const selectImage = (imageUrl) => {
datas.dataSelectedImage = imageUrl;
};
//頁面初始加載
Vue.onMounted(() => {
//獲取選項值
get_option();
});
return {
datas,
siteData,
update_option,
update_img,
clear_img,
selectImage,
getMediaList,
getData,
};
},
template: `
文本框1：<input type="text" v-model="datas.dataOne"><br/>
文本框2：<input type="text" v-model="datas.dataTwo"><hr/>
用戶選擇：<select v-model="datas.dataName" multiple>
<option v-for="option in siteData.user" :key="option.id" :value="option.id">
{{ option.name }}
</option>
</select>
<p>你選擇了：{{ datas.dataName }}</p><br/>
按住command(control)按鍵即可進行多選<hr/>
<input type="file" @change.native="update_img"><br/>
<button type="button" @click="clear_img">清理</button><br/>
<img style="width: 300px;height: auto;" :src=datas.dataImage v-if =datas.dataImage ><hr/>
<button @click="getMediaList">獲取媒體庫圖片</button>
<div style="max-width: 800px;;display: flex; margin: 1em 0;">
<div v-for="media in getData.mediaList" :key="media.id" style="float: left;">
<img :src="media.source_url" style="max-width: 150px; height: auto;vertical-align: top; ">
<button @click="selectImage(media.source_url)">選擇</button>
</div>
</div>
<h2>{{datas.dataSelectedImage ? "已" : "未"}}選擇圖片</h2>
<img :src="datas.dataSelectedImage" v-if="datas.dataSelectedImage" style="width: 150px;height: auto;"><hr/>
<button class="button button-primary" @click="update_option">保存</button>`,
};
Vue.createApp(App).mount("#vuespa");
總結
本節我們學習了從本地上傳圖片和從媒體庫選擇圖片。
代碼部分比較亂，尤其是模版部分，這些都會在后續的打包中進行解決的。
能堅持到這里，你已經很棒了，相信到這里，你已經掌握了復選框，布爾值，單選框，多選框等內容，我就不再過多贅述了。
下一節，我們將使用Vite對現有 JS 文件進行打包，并使用一些基礎的CSS樣式對現有選項進行外觀美化，并進一步研究數據校驗問題。
