關於uni-app多文件上傳的坑

uni-app中是實現圖片上傳單張圖片能夠直接使用官方文檔中dcloud.io/doc.html,選擇問文檔→上傳、下載,調用api(必須看一下官方文檔,有每一個參數的解釋)html

uni.uploadFile(OBJECT)

//單張圖片直接使用一下代碼,通常用於頭像上傳
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

相關文章
相關標籤/搜索