页面中显示ftp中的图片

本文介绍如何在网页设计中引用FTP服务器上的图片资源,包括设置正确的URL路径,处理跨域问题,以及确保FTP服务器的公共访问设置。通过这些方法,用户可以成功地在网页上展示存储在FTP服务器上的图片。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

package com.sais.inkaNet.common.displayImage;

import com.opensymphony.xwork2.ActionSupport;

import com.sais.inkaNet.base.util.FtpImageDisplay;
import com.sais.inkaNet.base.util.PropertiesUtil;

import org.apache.log4j.Logger;
import org.apache.struts2.ServletActionContext;

import javax.servlet.http.HttpServletResponse;

public class DisplayImageAction extends ActionSupport {
	private static final long serialVersionUID = 1L;
	private static final Logger log = Logger.getLogger(DisplayImageAction.class);
    /**
     * <p>属性描述: [要访问的图片url]</p>
     */
    private String imageUrl;

    /**
     * <p>属性描述: [ftp ip地址]</p>
     */
    private String ip = PropertiesUtil.getSetting("ftp.ip", "");

    /**
     * <p>属性描述: [ftp密码]</p>
     */
    private String password = PropertiesUtil.getSetting("ftp.password", "");

    //---------ftp---------
    /**
     * <p>属性描述: [用户名]</p>
     */
    private String username = PropertiesUtil.getSetting("ftp.username", "");

    /**
     * <p>方法描述: [获得ftp中的图片用于页面显示]</p>
    *
    * @return 返回结果的说明
    *
    * @throws Exception 抛出异常的原因
    */
    @Override
    public String execute() throws Exception {
    	log.info("-->获得ftp图片,imageUrl:"+imageUrl);
        /**
                1.+ 表示空格(在 URL 中不能使用        空格)    %20
                2./ 分隔目录和子目录                                         %2F
                3.? 分隔实际的 URL 和参数                                %3F
                4.% 指定特殊字符                                              %25
                5.# 表示书签                                                     %23
                6.& URL 中指定的参数间的分隔符                       %26
                7.@     %40
         */

    	imageUrl = imageUrl.contains("\\") ? imageUrl.replace("\\", "%2F") : imageUrl;
        imageUrl = imageUrl.contains("/") ? imageUrl.replace("/", "%2F") : imageUrl;
        password = password.contains("@")?password.replace("@", "%40"):password;
        HttpServletResponse response = ServletActionContext.getResponse();
        FtpImageDisplay.getFtpImage(username, password, ip, imageUrl, response);

        return NONE;
    }

    public String getImageUrl() {
        return imageUrl;
    }

    public void setImageUrl(String imageUrl) {
        this.imageUrl = imageUrl;
    }
}
package com.sais.inkaNet.base.util; import org.apache.log4j.Logger; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.URL; import java.net.URLConnection; import javax.servlet.http.HttpServletResponse; public class FtpImageDisplay { /** * <p>属性描述: [声明日志]</p> */ private static final Logger log = Logger.getLogger(FtpImageDisplay.class); /** * <p>方法描述: [从ftp中获得图片流返给页面]</p> * * @param username 用户名 * @param password 密码 * @param ftpUrl ftp的url * @param fileUrl 文件路径 * @param response Response对象 */ public static void getFtpImage(String username, String password, String ftpUrl, String fileUrl, HttpServletResponse response) { InputStream isr = null; OutputStream out = null; URL u = null; try { if ((fileUrl != null) && !"".equals(fileUrl)) { response.setHeader("Content-Type", "image/png"); //response.setContentType("image/*"); // 设置返回的文件类型 out = response.getOutputStream(); StringBuffer sb = new StringBuffer("ftp://"); sb.append(username + ":"); sb.append(password + "@"); sb.append(ftpUrl + "/" + fileUrl); u = new URL(sb.toString()); URLConnection urlconn = u.openConnection(); isr = urlconn.getInputStream(); int len = urlconn.getContentLength(); int i = len; int c; while (((c = isr.read()) != -1) && (--i > 0)) { out.write(c); } log.info("获取ftp图片" + fileUrl); } else { log.warn("所要显示的图片路径为空"); } } catch (Exception e) { log.error(e.getMessage()); } finally { try { if (isr != null) { isr.close(); } if (out != null) { out.close(); } } catch (IOException e) { log.error(e.getMessage()); } } } }

 

要在Vue中显示FTP上的图片,可以使用以下步骤: 1. 首先,确保你的Vue项目已经安装了依赖的插件,可以使用`npm`或`yarn`来安装。 2. 创建一个Vue组件,用于显示FTP上的图片。可以在你的项目中的`components`目录下创建一个新的组件,例如`FtpImage.vue`。 3. 在`FtpImage.vue`组件中,引入Vue的`axios`库,用于发送HTTP请求。 ```javascript // FtpImage.vue <template> <div> <img :src="imageUrl" alt="FTP Image" /> </div> </template> <script> import axios from 'axios'; export default { data() { return { imageUrl: '' }; }, mounted() { // 在组件加载完成后,发送HTTP请求获取FTP上的图片 axios.get('ftp://example.com/path/to/image.jpg', { responseType: 'arraybuffer' }) .then(response => { // 将获取到的图片数据转换为Base64编码的字符串 const imageBase64 = btoa( new Uint8Array(response.data) .reduce((data, byte) => data + String.fromCharCode(byte), '') ); // 拼接Base64编码的图片字符串 this.imageUrl = `data:image/jpeg;base64,${imageBase64}`; }) .catch(error => { console.error('Failed to fetch FTP image:', error); }); } }; </script> ``` 4. 在需要显示FTP图片的地方,使用`<ftp-image></ftp-image>`标签引入刚刚创建的组件。 ```vue <template> <div> <ftp-image></ftp-image> </div> </template> <script> import FtpImage from '@/components/FtpImage.vue'; export default { components: { FtpImage } }; </script> ``` 将`ftp://example.com/path/to/image.jpg`替换为你实际的FTP图片地址。当组件加载完成后,它会发送HTTP请求获取FTP上的图片,并将其显示页面上。 请注意,由于浏览器的安全限制,直接在`<img>`标签的`src`属性中引用FTP链接是不允许的。因此,我们需要使用HTTP请求获取图片数据,并将其转换为Base64编码的字符串,然后再将其赋值给`<img>`标签的`src`属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值