vue3传递账号密码读取FTP服务器上的图片显示到前端页面

在 Vue3 中，如果你想通过传递账号密码从 FTP 服务器上获取图片并显示在前端页面上，你可以使用第三方库如 `vue-ftp` 或者 `jsFtp` 来处理文件传输操作。以下是简单的步骤：

1. 安装依赖：
首先，在你的项目中安装所需的 FTP 操作库：

   npm install vue-ftp jsftppromise --save

2. 创建实例：
在你的组件里，创建一个 FTP 对象，并使用传入的账号密码初始化连接：

   import Ftp from 'vue-ftp';
   import JsFtpPromise from 'jsftppromise';

   data() {
     return {
       ftp: new Ftp({
         host: 'your_ftp_host',
         user: this.credentials.user,
         password: this.credentials.password,
       }) // 或者如果是 jsFtpPromise
       // ftp: JsFtpPromise('your_ftp_host', this.credentials),
     };
   },
   props: {
     credentials: {
       type: Object,
       required: true,
       default: () => ({
         user: '',
         password: ''
       }),
     },
   },
   mounted() {
     this.ftp.connect().then(() => {
       // 连接成功后下载图片
       this.downloadImage();
     });
   },
   
   methods: {
     async downloadImage() {
       const file = await this.ftp.get('/path/to/image.jpg');
       // 将图片展示在前端，比如使用 img 组件
       this.$emit('image-loaded', file);
     }
   },
   // 然后在父组件接收这个事件并处理图片的显示
   template: `
     <img v-if="imageUrl" :src="imageUrl" alt="Image" />
   `,
   computed: {
     imageUrl() {
       return this.$event.imageLoaded ? this.$event.imageLoaded.url : '';
     },
   },