UniApp檔案上傳（SpringBoot+Minio）
一、Uni檔案上傳
（1）、檔案上傳的問題
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 = "/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還沒跑完
})