uni-app中是實現圖片上傳單張圖片能夠直接使用官方文檔中dcloud.io/doc.html,選擇問文檔→上傳、下載,調用api(必須看一下官方文檔,有每一個參數的解釋)html
//單張圖片直接使用一下代碼,通常用於頭像上傳
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: 'https://www.example.com/upload', //僅爲示例,非真實的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
console.log(uploadFileRes.data);
}
});
}
});複製代碼
可是使用多圖片上傳是根據文檔會發現,上傳多個圖片,能夠給圖片添加name屬性是,由於文檔中只有一個name屬性,給圖片名字name=「image」,會發現後端只能拿到一個圖片。由於多有圖片的名字都變成了image,後端就只能拿到一個圖片而不是一個數組,須要本身作一下數據處理。解決方案:後端
//上傳多張圖片 handleUpimage() { uni.chooseImage({ count: 6, //默認9,上傳圖片張數 sizeType: ["original", "compressed"], //能夠指定是原圖仍是壓縮圖,默認兩者都有 sourceType: ["album"], //從相冊選擇 success: chooseImageRes => { let tempFiles = chooseImageRes.tempFiles; //獲取選中的圖片數組 let arr = []; //定義一個空數組,用於存放待會發送給後端的數組,格式爲arr=[{name:'image1',url:'圖片路徑'},{name:'image2',url:'圖片路徑'}] let i = 0; //設置初始值,進行數組的循環遍歷 for (var item of tempFiles) { i++; var obj = {}; obj.name = "images" + i; obj.url = item.path; arr.push(obj); } uni.uploadFile({ url: "http://192.168.0.200/app/Login/upload", //上傳服務器路徑 files: arr, //傳給後端的數組arr格式爲arr=[{name:'image1',url:'圖片路徑'},{name:'image2',url:'圖片路徑'}] // filePath: tempFilePaths[0], //傳單張圖片使用filePath和name,多張上傳使用flies,不須要filePath和name // name: 'images', formData: { type: 2, //後端要求的參數,能夠根據需求加入 num: i //添加這個參數給後端進行循環 }, success: uploadFileRes => { console.log(uploadFileRes);//成功後返回的數據 let item = JSON.parse(uploadFileRes.data).data; //裝換數據格式 var pic_arr = []; //上面步驟已經上傳成功了的,這步開始是將從後端拿回來的數據進行預覽。可將這個數組賦值給頁面中的樣式,進行循環顯示圖片 for (var i = 0; i < item.length; i++) { pic_arr.push(item[i].pic); } console.log(pic_arr); this.pic_listArr = pic_arr; this.pic_list = pic_arr; } }); } }); },複製代碼
上面須要後端配合作一下數據處理,循環傳過去的數組。有好的解決方案歡迎大佬指教。api