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; } }); } }); },
上面需要后端配合做一下数据处理,循环传过去的数组。有好的解决方案欢迎大佬指教。