关于uni-app多文件上传的坑

5,264 阅读2分钟

uni-app中是实现图片上传单张图片可以直接使用官方文档中dcloud.io/doc.html,选择问文档→上传、下载,调用api(必须看一下官方文档,有每个参数的解释)

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;            }          });        }      });    },

上面需要后端配合做一下数据处理,循环传过去的数组。有好的解决方案欢迎大佬指教。