實現(xiàn)思路：
- 選擇文件
wx.chooseMessageFile，官方文檔： https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html - 上傳文件 `wx,uploadFile` ， 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
- 查看所有上傳的pdf文件，顯示在頁面上
- 點擊pdf文件就實現(xiàn)預覽
5.1 先下載 wx.downloadFile 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html
5.2 在查看 wx.openDocument 官方文檔：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.openDocument.html
小程序端wxml
<!--pages/uploadPDF/uploadPDF.wxml-->
<view>
<view>
<button type="primary" bindtap="uploadPDF">上傳pdf文檔</button>
</view>
<view style="margin:20% auto;width: 100%;">
<button bindtap="loadPdfList">加載pdf文檔</button>
<view style="border: 1px solid black;width: 100%;">
<view wx:if="{{pdfList.length>0}}">
<view wx:for="{{pdfList}}" style="margin:5px;display: flex;justify-content: center;align-items: center;">
<text style="text-overflow: ellipsis; word-wrap: break-word;width: 80%;">{{item}}</text>
<button size="mini" type="warn" data-src="{{item}}" bindtap="lookPDF">查看</button>
</view>
</view>
<view wx:else style="text-align: center;">
<text>暫無</text>
</view>
</view>
</view>
</view>
小程序端ts
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
//pdf文檔
pdfList: {}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad() {
},
uploadPDF() {
console.log("uploadPDF")
wx.chooseMessageFile({
//最多可以選擇的文件數(shù)量，最多是0-100
count: 1,
//指打開文件的類型
type: "file",
success: (res) => {
let path = res.tempFiles[0].path
let suffix = path.split(".")[1]
if (suffix != "pdf") {
console.log("只能上傳pdf的文件")
return
}
wx.uploadFile({
url: "http://172.16.50.86:8080/upload",
header: {
"Content-Type": "multipart/form-data"
},
name: "file",
filePath: path,
success: (res) => {
if (res.statusCode == 200) {
console.log("上傳成功")
} else {
console.error(res.data)
}
}
})
}
})
},
//加載pdf列表
loadPdfList() {
wx.request({
url: "http://172.16.50.86:8080/fileList",
method: "GET",
success: (res) => {
this.setData({
pdfList: res.data
})
}
})
},
//查看pdf文檔
lookPDF(e) {
wx.showLoading({
title:"加載中...",
mask:true
})
let imgUrl = e.currentTarget.dataset.src
wx.downloadFile({
url: "http://172.16.50.86:8080/download?file=" + imgUrl,
success: (res) => {
if (res.statusCode === 200) {
setTimeout(() => {
wx.openDocument({
filePath:res.tempFilePath,
fileType:"pdf"
})
wx.showToast({
title:"加載成功！.",
icon:"success",
duration:2000,
})
wx.hideLoading()
}, 1500);
}
},fail(){
wx.hideLoading()
}
})
},
后端
1.1 導入相關(guān)的maven依賴
<!--文件上傳與下載相關(guān)的依賴-->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.2</version>
</dependency>
1.2 設(shè)置上傳文件的大小文章來源：http://www.zghlxwxcb.cn/news/detail-721450.html
spring:
servlet:
multipart:
max-file-size: 5MB # 單個文件大小
max-request-size: 50MB # 總文件大小Apache Commons FIle Upload
1.3 編寫代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-721450.html
package com.demo1.web;
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletContext;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.LinkedList;
import java.util.List;
@RestController
public class UploadController {
/**
* 文件上傳
*
* @param request
* @param file
* @return
* @throws IOException
*/
@PostMapping("/upload")
@CrossOrigin
public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file) throws IOException {
String parameter = request.getParameter("filePath");
System.out.println("parameter = " + parameter);
if (!file.isEmpty()) {
//上傳文件路徑
// String path = request.getServletContext().getRealPath("/uploadFiles/");
String path = "C:/upload";
//獲得上傳文件名
String fileName = file.getOriginalFilename();
File filePath = new File(path + File.separator + fileName);
System.out.println(filePath);
//如果文件目錄不存在，創(chuàng)建目錄
if (!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
//將上傳文件保存到一個目標文件中
file.transferTo(filePath);
return fileName;
}
return "fail";
}
/**
* 文件下載
*
* @param request
* @param fileName
* @return
* @throws IOException
*/
@GetMapping("download")
@CrossOrigin
public ResponseEntity<byte[]> download(HttpServletRequest request, @RequestParam("file") String fileName) throws IOException {
//下載文件路徑
String path = "C:/upload";
//構(gòu)建將要下載的文件對象
File file = new File(path + File.separator + fileName);
//設(shè)置響應頭
HttpHeaders headers = new HttpHeaders();
//下載顯示的文件名，解決中文名稱亂碼問題
String downloadFileName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
//通知瀏覽器以下載方式(attachment)打開文件
headers.setContentDispositionFormData("attachment", downloadFileName);
//定義以二進制流數(shù)據(jù)(最常見的文件下載)的形式下載返回文件數(shù)據(jù)
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
//使用spring mvc框架的ResponseEntity對象封裝返回下載數(shù)據(jù)
return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), headers, HttpStatus.OK);
}
@GetMapping("/fileList")
@CrossOrigin
public List<String> list(HttpServletRequest request) {
String path = "C:/upload";
File file = new File(path);
List<String> arrayList = new LinkedList<>();
for (String list : file.list()) {
String str = list;
String split = list.substring(list.indexOf(".") + 1);
if (split.equals("pdf")) {
arrayList.add(list);
}
}
return arrayList;
}
@GetMapping("/hello")
public String hello() {
return "hello";
}
}
到了這里，關(guān)于springboot+微信小程序?qū)崿F(xiàn)文件上傳下載（預覽）pdf文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
