微信小程序实现非图片视频(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")@ResponseBodypublic Result upload(@RequestParam("file") MultipartFile uploadFile) {
    return fileService.upload(uploadFile);}/*** 将文件保存入数据库* @param classid* @param url* @param fileName* @return*/@RequestMapping("file/add")@ResponseBodypublic Result addFileToClass(Long classid,String url,String fileName){
    return fileService.addFileToClass(classid, url, fileName);}

文件上传service

@Overridepublic 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);}@Overridepublic 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>

运行结果

在这里插入图片描述