日本一二三高清,欧美在线免费视频,欧美在线播放视频

本節實現了從本地上傳圖片至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樣式對現有選項進行外觀美化，并進一步研究數據校驗問題。

{{userData.name}}已認證

第四節：Vue3 開發WordPress設置選項 - 添加圖片上傳功能

預覽