watch: {
    //watch images数据，里面包含url
    'images': {
        handler(newVal) {
            // console.log(this.images);
            let that = this;
            //not video
            if( !this.hasVideo) {
                //newVal is a array, save url;
                newVal.forEach(val => {
                    // 缓存图片的api,核心在这里
                    that.apiImg.fetchImg(val.url,response=>{
                         // base64编码
                        //response来自cache 或者第1次访问的结果
                        val.url = response;
                    });
                    that.image_urls.push(val.url);
                    //place holder
                    val.url = resources.placeHolder;
                });
            }
            this.saved_images = newVal;
        },
        immediate: true,
        // deep: true,
    }

import { axios } from "../utils/http";
import localforage from "localforage";
import memoryDriver from "localforage-memoryStorageDriver";
import { setup } from "axios-cache-adapter";
import { setupCache } from "axios-cache-adapter";

// Register the custom `memoryDriver` to `localforage`
localforage.defineDriver(memoryDriver);
// Create `localforage` instance
const forageStore = localforage.createInstance({
  // List of drivers used
  driver: [
    localforage.INDEXEDDB,
    localforage.LOCALSTORAGE,
    memoryDriver._driver
  ],
  size: 10000000,
  // Prefix all storage keys to prevent conflicts
  name: "img-cache"
});

const cache = setupCache({
  //过期时间
  maxAge: 15 * 60 * 1000,
  store: forageStore
});

const api = axios.create({
  adapter: cache.adapter
});

export default {
  fetchImg: async function(url, fn) {
    const config = {
      responseType: "arraybuffer"
    };
    //get from store
    await forageStore.getItem(url, (err, value) => {
      if (!err && value) {
        console.log(forageStore);
        console.log("already cached");
        fn(value);
      } else {
        console.log("1st time");
        api
          .get(url, config)
          .then(async function(response) {
            //base64 format
            let bas64Url =
              "data:" +
              response.headers["content-type"] +
              ";base64," +
              btoa(
                new Uint8Array(response.data).reduce(
                  (data, byte) => data + String.fromCharCode(byte),
                  ""
                )
              );
            //store
            await forageStore.setItem(url, bas64Url, () => {
              console.log("set item ok");
              return fn(url);
            });
          })
          .catch(function(reason) {
            console.log(reason);
          });
      }
    });
  }
};