uniapp上传图片至服务器,获得在线图片链接预览(实战)

uniapp上传图片至服务器,获得在线图片链接预览(实战),第1张

功能需求: 前端选择本地文件,将选择好的文件显示在界面上进行预览,可同时选择四张进行预览。 思路如下: 前端选择本地的png、jpg、等格式的图片,将图片以二进制的形式传到后端服务器,后端对二进制图片进行处理,返回给前端一个服务器链接在线图片,在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。 首先 我们看一下uniapp的官方文档:https://uniapp.dcloud.io/api/media/image?id=chooseimage大概是这样的 先写一个模拟的demo 1:首先我是是用了colorUI的框架,在项目里面引入 在page底下的vue文件引入 这样一来,就不需要写什么样式了,直接使用写好的就行了。 效果是这样的 每次选完图片之后显示在页面上,我这里设置了最多可以选择四张,图片链接使用了临时的blob,接下来就要使用后端小伙伴给的接口,将自己本地的二进制文件传给他了。 在 chooseImage 选择好图片之后,写一个成功的回调函数,在回到函数里面添加一个图片上传的方法uploadFile,在方法里面添加url,等参数。 若是请求成功 则返回一个图片链接 添加接口之后 的,demo如下:

android客户端实现FTP文件需要用到 commons-net-3.0.1.jar

先将jar包复制到android libs目录下

复制以下实现代码

以下为实现代码:

/**

* 通过ftp上传文件

* @param url ftp服务器地址 如:

* @param port 端口如 :

* @param username 登录名

* @param password 密码

* @param remotePath 上到ftp服务器的磁盘路径

* @param fileNamePath 要上传的文件路径

* @param fileName 要上传的文件名

* @return

*/

public String ftpUpload(String url, String port, String username,String password, String remotePath, String fileNamePath,String fileName) {

FTPClient ftpClient = new FTPClient()

FileInputStream fis = null

String returnMessage = "0"

try {

ftpClient.connect(url, Integer.parseInt(port))

boolean loginResult = ftpClient.login(username, password)

int returnCode = ftpClient.getReplyCode()

if (loginResult &&FTPReply.isPositiveCompletion(returnCode)) {// 如果登录成功

ftpClient.makeDirectory(remotePath)

// 设置上传目录

ftpClient.changeWorkingDirectory(remotePath)

ftpClient.setBufferSize(1024)

ftpClient.setControlEncoding("UTF-8")

ftpClient.enterLocalPassiveMode()

fis = new FileInputStream(fileNamePath + fileName)

ftpClient.storeFile(fileName, fis)

returnMessage = "1" //上传成功

} else {// 如果登录失败

returnMessage = "0"

}

} catch (IOException e) {

e.printStackTrace()

throw new RuntimeException("FTP客户端出错!", e)

} finally {

//IOUtils.closeQuietly(fis)

try {

ftpClient.disconnect()

} catch (IOException e) {

e.printStackTrace()

throw new RuntimeException("关闭FTP连接发生异常!", e)

}

}

return returnMessage

}


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/748139.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-08-15
下一篇2023-08-15

发表评论

登录后才能评论

评论列表(0条)

    保存