微信小程序实现非图片视频(excell,word)文件上传
@TOC
微信小程序
查阅小程序的文件上传api，发现小程序api只提供了图片和视屏文件的上传api，如果我们要上传非图片文件怎么办叻?查阅api文档，可以发现web-view这组件
web-view组件
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型的小程序暂不支持使用。 根据官方的介绍，我们可以将web-view看做是浏览器，这样，我们可以采用网页上传文件的方式上传文件。
引入依赖（部分）
<!-- 文件上传组件 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>${commons-fileupload.version}</version>
</dependency>
<!-- 文件服务器发的fdfs相关 -->
<dependency>
<groupId>org.csource</groupId>
<artifactId>fastdfs-client-java</artifactId>
<version>1.27-SNAPSHOT</version>
</dependency>
</dependencies>
springmvc配置
<!--10*1024*1024即10M resolveLazily属性启用是为了推迟文件解析，以便捕获文件大小异常 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760" />
<property name="defaultEncoding" value="UTF-8" />
<property name="resolveLazily" value="true" />
</bean>
文件上传controller编写
/**
* 上传文件并返回一个文件的name，url
* @param uploadFile
* @return
*/
@RequestMapping("file/upload")
@ResponseBody
public Result upload(@RequestParam("file") MultipartFile uploadFile) {
return fileService.upload(uploadFile);
}
/**
* 将文件保存入数据库
* @param classid
* @param url
* @param fileName
* @return
*/
@RequestMapping("file/add")
@ResponseBody
public Result addFileToClass(Long classid,String url,String fileName){
return fileService.addFileToClass(classid, url, fileName);
}
文件上传service
@Override
public Result upload(MultipartFile uploadFile) {
if(uploadFile==null)
return Result.build(400, "文件为空");
//取图片扩展名
String orignalFilenName=uploadFile.getOriginalFilename();
System.out.println(orignalFilenName);
//获取文件后缀
String subString=orignalFilenName.substring(orignalFilenName.lastIndexOf(".")+1);
String url=null;
try {
FastDFSClient fastDFSClient=new FastDFSClient("classpath:resource/fastdfs.conf");
url=fastDFSClient.uploadFile(uploadFile.getBytes(),subString);
url=FILE_SERVER_URL+url;
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
List<String>list=new ArrayList<>();
list.add(orignalFilenName);
list.add(url);
System.out.println(url);
return Result.ok(list);
}
@Override
public Result addFileToClass(Long classid, String url,String fileName) {
if(classid==null||url==null||fileName==null)
return Result.build(400, "添加失败");
TbFile file=new TbFile();
file.setClassId(classid);
file.setName(fileName);
file.setAddr(url);
mapper.insertSelective(file);
return Result.ok();
}
小程序页面编写
/**
cid为我带入jsp页面的数据，如不需要，则可以不用带参数
*/
<web-view src="http://localhost:8080/upload.jsp?cid={{cid}}">文件上传</web-view>
jsp页面编写
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
</head>
<body>
<form id="form1" action="" target="frame1" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="button" value="上传" onclick="upload()">
</form>
<iframe name="frame1" frameborder="0" height="40" ></iframe>
<!-- 其实我们可以把iframe标签隐藏掉 -->
<script type="text/javascript">
//根据参数名称获取当前路径参数，既获取web-view携带过来的参数
function getQueryVariable(paraName) {
var url = document.location.toString();
var arrObj = url.split("?");
if (arrObj.length > 1) {
var arrPara = arrObj[1].split("&");
var arr;
for (var i = 0; i < arrPara.length; i++) {
arr = arrPara[i].split("=");
if (arr != null && arr[0] == paraName) {
return arr[1];
}
}
return "";
}
else {
return "";
}
}
function upload() {
$.ajax({
url: 'http://localhost:8080/file/upload',
type: 'POST',
cache: false,
data: new FormData($('#form1')[0]),
dataType:'json',
processData: false,
contentType: false,
success:function(result){
json=result;
fileName=json.data[0];
url=json.data[1];
console.log(fileName);
console.log(url);
var cid=getQueryVariable("cid");
console.log(cid);
$.ajax({
type:"post", // 请求类型
url:"http://localhost:8080/file/add", // 请求URL 将文件存入数据库
data:{
classid:cid,
fileName:fileName,
url:url,
}, // 请求参数 即是 在Servlet中 request.getParement();可以得到的字符串
dataType:"json", // 数据返回类型
cache:false, // 是否缓存
async:true, // 默认为true 异步请求
success:function(result){ // 成功返回的结果(响应)
alert("上传成功");
}
});
}
});
}
</script>
</body>
</html>
运行结果
