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

2024-02-01 分类：内容 阅读()

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

预览

需求如下

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

流程如下

效果如下

修改 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 =newFormData();
  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. };
  23. //处理图片上传事件
  24. const update_img =(event)=>{
  25. const file =event.target.files[0];
  26. upload_img(file).then((url)=>{
  27. //将拿到的图片URL传给图片变量
  28. datas.dataImage = url;
  29. });
  30. };

添加清空功能

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

  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. <inputtype="file" @change.native="update_img"><br/>
  2. <buttontype="button" @click="clear_img">清理</button><br/>
  3. <imgstyle="width:300px;height:auto;" :src=datas.dataImagev-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. <divstyle="max-width:800px;;display: flex; margin:1em0;">
  3. <divv-for="media in getData.mediaList" :key="media.id"style="float: left;">
  4. <img :src="media.source_url"style="max-width:150px; height:auto;vertical-align: top;">
  5. <button @click="selectImage(media.source_url)">选择</button>
  6. </div>
  7. </div>
  8. <h2>{{datas.dataSelectedImage ? "已" : "未"}}选择图片</h2>
  9. <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. });
  4. const update_img =(event)=>{
  5. const file =event.target.files[0];
  6. const formData =newFormData();
  7. //预览图片
  8. datas.dataImage = URL.createObjectURL(file);
  9. }
  10. <input type="file"@change.native="update_img"><br/>
  11. <img style="width: 300px;height: auto;":src=datas.dataImage ><hr/>

总结

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

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

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

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

赞(0)
未经允许不得转载：大象juǎn » 第四节：Vue3 开发WordPress设置选项 - 添加图片上传功能
分享到

相关推荐

置顶推荐