实现uniapp上传图片
特别说明下crop
参数,是图像裁剪的参数
// uni.chooseImage() 基本示例 uni.chooseImage({ count: 6, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album'], //从相册选择 success: function (res) { console.log(JSON.stringify(res.tempFilePaths)); } });
使用注意事项:
介绍:将本地资源上传到开发者服务器,客户端发起一个 POST 请求,其中 content-type 为 multipart/form-data
// 示例代码 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); } }); } });
// 项目实战中使用 uni.chooseImage({ count: 1, // 图片数量 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], //从相册选择或者拍照 success: (res) => { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths[0]) _this.logo_list = tempFilePaths[0] uni.uploadFile({ url: 'https://xx.com/center/group/icon', //上传图片api filePath: tempFilePaths[0], name: 'groupicon', header:{ "Authorization": userinfo.token }, success: (res) => { let group = JSON.parse(res.data) uni.showToast({ title:"上传成功", icon:"success" }) } }); } });
图片上传进度监听 uploadTask()
在uniapp中上传图片,需要uni.chooseImage()和uni.uploadFile()这两个api结合使用,才能完成图片的上传,还有一个
uploadTask(),
可以用来监听上传进度变化事件,和取消上传任务。我们根据项目需求去决定要不要添加这个监听行为。
// 示例 uploadTask.onProgressUpdate((res) => { console.log('上传进度' + res.progress); console.log('已经上传的数据长度' + res.totalBytesSent); console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend); // 测试条件,取消上传任务。 if (res.progress > 50) { uploadTask.abort(); } });