第四节：Vue3 开发WordPress设置选项 - 添加图片上传功能

承接上文，在常用选项中，图片上传和选择功能用的较多，本节来实现这一功能，我们着重讨论功能实现，更多美化样式以及优化性能问题，可自行探索。此处为了便于大家理解，代码言简意赅。

预览

需求如下

• 提供一个图片上传按钮
• 可展示选中的图片
• 提供清空图片按钮

流程如下

效果如下

修改 index.js

存储图片链接值

我们添加键 dataImage 用于存储选中图片的链接

1. //存储选项值
2. const datas = Vue.reactive({
3. dataImage: "",
4. });

在获取选项数据时进行赋值，这里，我修改了原来的函数名为 get_option ，更加简洁易懂。

1. //获取数据
2. const get_option = () => {
3. axios
4. .post(dataLocal.route + "pf/v1/get_option", datas, {
5. headers: {
6. "X-WP-Nonce": dataLocal.nonce,
7. "Content-Type": "application/json",
8. },
9. })
10. .then((response) => {
11. //省略
12. datas.dataImage = data.dataImage;
13. })
14. .catch((error) => {
15. window.alert("连接服务器失败或后台读取出错！数据读取失败");
16. console.log(error);
17. });
18. };

添加图片上传功能

我们通过以下两个函数，实现图片上传功能

1. //上传图片
2. const upload_img = (file) => {
3. const formData = new FormData();
4. formData.append("file", file);
5. return axios
6. .post(dataLocal.route + "wp/v2/media", formData, {
7. headers: {
8. "X-WP-Nonce": dataLocal.nonce,
9. "Content-Type": "multipart/form-data",
10. },
11. })
12. .then((response) => {
13. // 图片上传成功后的处理逻辑
14. const data = response.data;
15. //返回图片URL
16. return data.source_url;
17. })
18. .catch((error) => {
19. console.error(error);
20. // 图片上传失败后的处理逻辑
21. });
22. };
24. //处理图片上传事件
25. const update_img = (event) => {
26. const file = event.target.files[0];
27. upload_img(file).then((url) => {
28. //将拿到的图片URL传给图片变量
29. datas.dataImage = url;
30. });
31. };

添加清空功能

添加以下代码，实现清空功能

1. //清空选择图片
2. const clear_img = () => {
3. datas.dataImage = "";
4. };

添加展示模版

为了模版可以拿到对应的功能，记得将需要的功能函数返回出来。

1. return {
2. datas,
3. siteData,
4. update_option,
5. update_img,
6. clear_img,
7. };

模版代码如下

1. <input type="file" @change.native="update_img"><br/>
2. <button type="button" @click="clear_img">清理</button><br/>
3. <img style="width: 300px;height: auto;" :src=datas.dataImage v-if =datas.dataImage ><hr/>

此时刷新页面，尝试选择图片并保存，即可看到我们完成了图片上传功能，清理按钮也能正常工作，记得修改选项后点击保存按钮。

选择媒体库文件

修改 index.js 文件

流程

• 创建函数，通过REST API 从WordPress 媒体库中获取图片数据
• vue将获取的图片数据展示在前端，并提供选择按钮
• 选中图片后，将值传给选项值
• 保存

效果

创建变量

我们创建变量用于存储获取的图片信息，为了便于扩展，这里使用reactive

1. //存储获取的值
2. const getData = Vue.reactive({
3. //存储获取的媒体库值
4. mediaList: [],
5. });

添加新选项

1. //存储选项值
2. const datas = Vue.reactive({
3. //省略
4. dataSelectedImage: "",
5. });

获取数据也得加上

1. //获取数据
2. const get_option = () => {
3. axios
4. .post(dataLocal.route + "pf/v1/get_option", datas, {
5. headers: {
6. "X-WP-Nonce": dataLocal.nonce,
7. "Content-Type": "application/json",
8. },
9. })
10. .then((response) => {
11. //省略
12. datas.dataSelectedImage = data.dataSelectedImage;
13. })
14. .catch((error) => {
15. window.alert("连接服务器失败或后台读取出错！数据读取失败");
16. console.log(error);
17. });
18. };

获取媒体库图片

通过以下函数获取图片信息并存储信息进键 mediaList 中

1. //获取媒体库图片
2. const getMediaList = () => {
3. axios
4. .get(dataLocal.route + "wp/v2/media")
5. .then((response) => {
6. getData.mediaList = response.data;
7. })
8. .catch((error) => {
9. console.error(error);
10. });
11. };

选择媒体库图片

添加以下代码进行选择

1. //从媒体库选中图片
2. const selectImage = (imageUrl) => {
3. datas.dataSelectedImage = imageUrl;
4. };

添加模版

将模版用的数据进行导出

1. return {
2. datas,
3. siteData,
4. update_option,
5. update_img,
6. clear_img,
7. selectImage,
8. getMediaList,
9. getData,
10. };

添加模版内容

1. <button @click="getMediaList">获取媒体库图片</button>
2. <div style="max-width: 800px;;display: flex; margin: 1em 0;">
3. <div v-for="media in getData.mediaList" :key="media.id" style="float: left;">
5. <img :src="media.source_url" style="max-width: 150px; height: auto;vertical-align: top; ">
6. <button @click="selectImage(media.source_url)">选择</button>
7. </div>
8. </div>
9. <h2>{{datas.dataSelectedImage ? "已" : "未"}}选择图片</h2>
10. <img :src="datas.dataSelectedImage" v-if="datas.dataSelectedImage" style="width: 150px;height: auto;"><hr/>

获取选项值

在php 中，可通过以下方法获取选项值

1. echo "<br/>";
2. echo get_option('dataImage');
3. echo "<br/>";
4. echo get_option('dataSelectedImage');

改进

上述代码还有很多改进空间，此处为便于演示以及篇幅原因，仅叙于此。

以下是几个可以优化的点

• 选中图片后无需上传至WordPress即可预览，点击保存按钮后再上传图片，
• 若图片选项有值，则使用上传后的图片链接进行图片预览
• 优化清理按钮，或做成组件，可复用

本地图片预览功能

1. const datas = Vue.reactive({
2. dataImage: "",
3. });
5. const update_img = (event) => {
6. const file = event.target.files[0];
7. const formData = new FormData();
9. //预览图片
10. datas.dataImage = URL.createObjectURL(file);
11. }
13. <input type="file" @change.native="update_img"><br/>
14. <img style="width: 300px;height: auto;" :src=datas.dataImage ><hr/>

总结

本节我们学习了从本地上传图片和从媒体库选择图片。

代码部分比较乱，尤其是模版部分，这些都会在后续的打包中进行解决的。

能坚持到这里，你已经很棒了，相信到这里，你已经掌握了复选框，布尔值，单选框，多选框等内容，我就不再过多赘述了。

下一节，我们将使用Vite对现有 JS 文件进行打包，并使用一些基础的CSS样式对现有选项进行外观美化，并进一步研究数据校验问题。

最新文章

• 后续文章持续撰写中，点个关注，获取平台最新文章推送。
• 技术有限，还望诸位协助勘误，于评论区指出，
• 常一文多发，最新勘定和增补文章于下方链接给出
• www.npc.ink/277283.htmlhttp://www.npc.ink/277283.html