vue编写APP长按保存图片至本地

要实现在Vue编写的APP中，长按保存图片至本地，可以参考以下步骤：

1. 首先，在Vue组件中引入HTML5的FileSaver库，用于将文件保存到本地。

npm install file-saver --save

2. 在需要保存图片的地方，添加一个长按事件（例如长按图片），并获取图片的URL。

<template>
  <img src="your-image-url" @touchstart="onLongPress">
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    onLongPress(e) {
      e.preventDefault();
      const imgUrl = e.target.src;
      // ...
    },
  },
};
</script>

3. 接下来，使用XMLHttpRequest获取图片数据，并将其转换为Blob对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', imgUrl, true);
xhr.responseType = 'blob';
xhr.onload = () => {
  if (xhr.status === 200) {
    const blob = xhr.response;
    // ...
  }
};
xhr.send();

4. 最后，使用FileSaver库将Blob对象保存为文件。

const fileName = 'your-file-name.png';
saveAs(blob, fileName);

完整示例代码：

<template>
  <img src="your-image-url" @touchstart="onLongPress">
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    onLongPress(e) {
      e.preventDefault();
      const imgUrl = e.target.src;
      const xhr = new XMLHttpRequest();
      xhr.open('GET', imgUrl, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          const blob = xhr.response;
          const fileName = 'your-file-name.png';
          saveAs(blob, fileName);
        }
      };
      xhr.send();
    },
  },
};
</script>

注意：由于涉及到文件下载，需要确保浏览器支持download属性，以及用户授权下载。在移动端需要使用touchstart事件，而不是click事件。