uni-app实现上传图片或者文件(直接上代码)

配置Tomcat

1.1、添加upload文件夹

在webapps\Root文件夹下创建用于接收上传文件的upload文件夹

1.2、修改conf\web.xml设置允许上传文件

     <init-param><param-name>readonly</param-name><param-value>false</param-value></init-param>

1.3、修改conf\server.xml设置端口号,避免跟springboot冲突

<Connector port="8060" protocol="HTTP/1.1"connectionTimeout="20000"redirectPort="8443"  URIEncoding="UTF-8"/>

二、uni-app代码:

               //_self为在export default外面作用域外定义的全局变量,用来等价代换_self = this;//第一步:打开手机相册或者文件管理器选择文件uni.chooseImage({count:1,//允许上传一张图片sizeType:['original','compressed'],//可以指定是原图还是压缩图，默认二者都有sourceType:['album'],//从相册选择success:function(res){//获得选择好的文件,就算只有一个文件也是数组const tempFilePaths = res.tempFilePaths;//第二步:把选择的文件上传到服务器const uploadTask = uni.uploadFile({url:'http://localhost:8070/upload/file',//后端接口urlfilePath:tempFilePaths[0],name:'fileName',//和后端接口需要的参数名一致success: (res) => {console.log("图片路径为:"+res.data)_self.formData.logoPath=res.data//获取到图片路径}})//获取文件的上传进度uploadTask.onProgressUpdate(function(res){console.log('上传进度:'+res.progress)console.log('已经上传的数据长度:'+res.totalBytesSent)console.log('预计需要上传的数据总长度:'+res.totalBytesExpectedToSend)})}})

如果是文件:

上传文件方法也可以上传图片,只需要把extension中改为图片对应为后缀名即可

  _self = this;uni.chooseFile({//第一步:选择文件count: 1, //默认100extension:['.pdf','.doc','.xlsx','.docx','.xls'],success: function (res) {const tempFilePaths = res.tempFilePaths;//若果只选择一个文件,这个文件就是数组的第一个元素//第二步:把选择的文件上传到服务器uni.uploadFile({url:'http://localhost:8070/upload/file',filePath:tempFilePaths[0],name:'fileName',success: (res) => {console.log(res.data)_self.formData.attachmentpath = res.data}})}})}

三、spring boot代码:

 JesyFileUpload工具类:

  /*** 上传文件** @param file --文件名* @param serverUrl --服务器路径http://127.0.0.1:8080/ssm_image_server* @return* @throws IOException*/public static String uploadFile(MultipartFile file, String serverUrl) throws IOException {//重新设置文件名String newFileName = new Date().getTime()+""; //将当前时间获得的毫秒数拼接到新的文件名上//随机生成一个3位的随机数Random r = new Random();for(int i=0; i<3; i++) {newFileName += r.nextInt(10); //生成一个0-10之间的随机整数}//获取文件的扩展名String orginalFilename = file.getOriginalFilename();String suffix = orginalFilename.substring(orginalFilename.indexOf("."));//创建jesy服务器，进行跨服务器上传Client client = Client.create();//把文件关联到远程服务器//例如：http://127.0.0.1:8080/ssm_image_server/upload/123131312321.jpgWebResource resource = client.resource(serverUrl+"/"+newFileName+suffix);//上传//获取文件的上传流resource.put(String.class, file.getBytes());//图片上传成功后要做的事儿//1、ajax回调函数做图片回显（需要图片的完整路径）//2、将图片的路径保存到数据库（需要图片的相对路径）
//        String fullPath = serverUrl+"/upload/"+newFileName+suffix; //全路径String relativePath = "/upload/"+newFileName+suffix; //相对路径return relativePath;}

controller:

@RestController
@RequestMapping("/upload")
@CrossOrigin(origins = "*")
public class UploadController {@PostMapping("/file")public String upload(MultipartFile fileName) {String path = "";try {path=JesyFileUploadUtil.uploadFile(fileName, "http://localhost:8060/upload");//"http://localhost:8060/upload"为文件服务器访问路径,这里用的是用Tomcat} catch (IOException e) {e.printStackTrace();}return path;}
}

uni-app实现上传图片或者文件(直接上代码)相关推荐

iOS 打破沙盒限制处理其他App的Office等文件（上传、下载、预览）
前言项目要加个附件功能,要求发布者能添加word.pdf什么的,查看者能下载并预览. 安卓端表示OK无问题.iOS端表示w*%#-c.由于沙盒机制,没越狱的iPhone不同App文件都是不互通的. ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
uni - app 的 pages.json 文件页面配置与全局配置
1. 新建页面 pages 文件上右键新建页面创建同名目录,注册 pages.json ,使用 scss 页面页面新建完成: 且 pages.json 文件中已经注册,这个注册和原生微信小程序 ...
【python】用python实现多个excel合并成一个excel文件------直接上代码
小虾也是参考了一些大神的代码,然后自己动手实现了一下,然后发布出来,有需要的来学习呀! 小虾在这儿提供2种方法来实现,但小虾比较喜欢第一种,容易而且好理解一点. 第一种实现方法: # 导入需要使用的 ...
uniapp 打包app后，选择文件上传时，编辑上传文件
uniapp打包app后,业务需求有个一个需要上传文件的需求,因此需要查找手机的本地文件,但是uni.chooseFile(OBJECT)这个api无法作用在app上,因此在插件市场找到的了别人写好的 ...
php上传图文教程,PHP 上传图片、文件的方法
这篇文章介绍的内容是关于PHP 上传图片.文件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下上传的方法:function uploadFile2($subdirectory){ ...
webapi实现AJAX多文件上传,AJAX调用webapi上传图片或文件
AJAX调用webapi上传图片或文件,并返回刚上传的文件名.废话不多说直接贴代码吧 html相关:html> Title function doUpload() { var formData ...
App.vue文件本质上也是js文件(javascript文件)
App.vue文件本质上也是js文件(javascript文件) App.vue描述的是一个组件(在这里扮演着一个大的组件而已) 组件的结构组件的样式组件的脚本组件的结构:<templat ...
layui上传文件php上传接口异常,layui.upload上传图片报错“请求上传接口出现异常”...
layui.upload上传图片报错"请求上传接口出现异常"且接口报404问题在调试layui.upload上传图片时候报错"请求上传接口出现异常": 且接口 ...

uni-app实现上传图片或者文件(直接上代码)

配置Tomcat

1.1、添加upload文件夹

1.2、修改conf\web.xml设置允许上传文件

1.3、修改conf\server.xml设置端口号,避免跟springboot冲突

二、uni-app代码:

三、spring boot代码:

uni-app实现上传图片或者文件(直接上代码)相关推荐

最新文章

热门文章