UniApp檔案上傳（SpringBoot+Minio）
一、Uni檔案上傳
（1）、檔案上傳的問題
UniApp檔案上傳檔案
uni.uploadFile({
url: 'https://www.example.com/upload', //僅為示例，非真實的介面地址
files: 圖片地址物件陣列,
formData: {
'user': 'test'
},
success: (res) => {
console.log(res.data);
}
});
官方給出得使用方法，但是，，，圖片物件陣列要以key-value存盤
name = 檔案名稱，uri = 檔案地址路徑
這樣就會有一個問題，后端無法用陣列或集合取值，因為官方說如果name一樣或者不寫
那總不能寫n個引數，后臺用n個引數接把、很 cao單 的問題
（2）、解決思路
百度若干個小時，聽了一堆一摸一樣的屁話，找到一篇文章說 MultipartRequest，于是后臺就用這個接引數，發現可以接到，
1、首先
uni拿到上傳檔案的圖片地址陣列物件，然后把他轉成uni要求的key-value格式
//把傳過來的圖片path陣列轉為指定格式
var filelist = [];
for (var i = 0; i < imgList.length; i++) {
var obj = {};
obj.name = "img" + i;
obj.uri = imgList[i];
filelist.push(obj)
}
這樣第一張圖叫 img0 、、以此類推
2、發送請求
傳給后端之前，告訴后端總共有幾張圖片要傳過去
uni.uploadFile({
url: 'https://www.example.com/upload', //僅為示例，非真實的介面地址
files: 上邊的filelist,
formData: {
//圖片張數
'length': 上邊的filelist.length
},
success: (res) => {
console.log(res.data);
}
});
3、后端接參
上邊說了，后端用MultipartRequest接收引數
@PostMapping(value = "https://www.cnblogs.com/upimg", headers = "content-type=multipart/form-data")
@ApiOperation("多檔案上傳")
public String upload(MultipartRequest request, Integer num) throws Exception {
return Result.ok(this.MinioUtils.putObject(request, num));
}
4、后端結合Minio的處理
上篇文章也說了 Minio 是怎么上傳檔案的
public List<String> putObject(MultipartRequest request, Integer num) throws Exception {
if (num == null || num < 1) {
throw new CustomizeException(ErrorCode.UP_IMAGE_NUM_IS_NULL);
}
// bucket 不存在，創建
if (!minioClient.bucketExists(this.bucket)) {
minioClient.makeBucket(this.bucket);
}
InputStream inputStream;
//回傳的圖片地址陣列
List<String> imgList = new ArrayList<>();
try {
//回圈多檔案上傳
for (int i = 0; i < num; i++) {
request.getFile("img" + i)//回圈取檔案并上傳
imgList.add(檔案地址);
}
} catch (Exception ex) {
throw new CustomizeException(ErrorCode.UP_IMAGE_ERROR);
}
return imgList;
5、uni處理回傳結果
uni收到的回傳結果是 String要做下處理才能使用
success: (res) => {
JSON.parse(res.data);
}
二、檔案上傳的異步問題
uni的檔案上傳因為是異步，所以也要做些處理
export function upup(list) {
//把傳過來的圖片path陣列轉為指定格式
var filelist = [];
for (var i = 0; i < list.length; i++) {
var obj = {};
obj.name = "img" + i;
obj.uri = imgList[i];
filelist.push(obj)
}
return new Promise((resolve, reject) => {
//上傳圖片
uni.uploadFile({
url: 請求地址,
files: filelist,
formData: {
'num': 圖片張數
},
header: {
"Content-Type": "multipart/form-data"
},
success: (res) => {
//回傳的是字符需要轉json
resolve(JSON.parse(res.data))
},
fail: (res) => {
reject
}
})
})
}
呼叫的時候
upup.then(res => {
//在此處做處理，因為是異步所以此處的res只能在此處用
//無法宣告變數把res賦值給他
//因為賦值完畢后res還沒跑完
})
完~，百度一查一群籃子貨在哪兒復制粘貼博客，幾頁的答案一摸一樣，一群籃子貨，如有需要轉載，記得標明出處，
迷途者尋影而行轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/469679.html
標籤：其他
下一篇：代碼塊的運行順序