首先，在页面中创建一个按钮，并绑定点击事件，用于选择图片：
1. <template> 2. <view> 3. <!-- 选择图片按钮 --> 4. <button @tap="chooseImage">选择图片</button> 5. 6. <!-- 显示已选择的图片 --> 7. <image v-for="(img, index) in images" :key="index" :src="img"></image> 8. 9. <!-- 图片上传按钮 --> 10. <button @tap="uploadImages">上传图片</button> 11. </view> 12. </template>
在return中写，用于存放图片路径
images: [] // 存储已选择的图片路径
在下方代码中，我们创建了一个 chooseImage 方法。当触发 "选择图片" 事件时，会调用 chooseImage 方法，并使用 uni.chooseImage API 来选择图片，然后将选中的图片路径保存在 images 数组中。
1. chooseImage() { 2. uni.chooseImage({ 3. count: 9, // 最多可选择的图片数量 4. success: res => { 5. // 获取选中的图片路径 6. this.images = res.tempFilePaths; 7. } 8. });
在下方代码中，我们创建 uploadImages 方法。当用户点击 "上传图片" 按钮时，会调用 uploadImages 方法，遍历 images 数组，并使用 uni.uploadFile API 将每张图片上传到指定的接口地址。
在 uni.uploadFile 的配置中，需要指定上传的 URL 地址、要上传的文件路径（在这里是图片的临时路径），以及其他可能需要的表单数据。同时也提供了成功和失败的回调函数，可根据实际需求进行处理。
需要注意的是，上传图片时需要正确配置服务器端的接口地址，并确保服务器能正确处理接收到的图片文件。
1. uploadImages() { 2. // 遍历已选择的图片数组 3. this.images.forEach(image => { 4. uni.uploadFile({ 5. url: 'https://example.com/upload', // 上传图片的接口地址 6. filePath: image, 7. name: 'file', 8. formData: { 9. // 可以携带额外的参数 10. userId: '123456' 11. }, 12. success: res => { 13. console.log('上传成功', res.data); 14. // 处理上传成功后的逻辑 15. }, 16. fail: err => { 17. console.log('上传失败', err); 18. // 处理上传失败后的逻辑 19. } 20. }); 21. }); 22. }
完整代码预览
1. <template> 2. <view> 3. <!-- 选择图片按钮 --> 4. <button @tap="chooseImage">选择图片</button> 5. 6. <!-- 显示已选择的图片 --> 7. <image v-for="(img, index) in images" :key="index" :src="img"></image> 8. 9. <!-- 图片上传按钮 --> 10. <button @tap="uploadImages">上传图片</button> 11. </view> 12. </template> 13. 14. <script> 15. export default { 16. data() { 17. return { 18. images: [] // 存储已选择的图片路径 19. }; 20. }, 21. methods: { 22. chooseImage() { 23. uni.chooseImage({ 24. count: 9, // 最多可选择的图片数量 25. success: res => { 26. // 获取选中的图片路径 27. this.images = res.tempFilePaths; 28. } 29. }); 30. }, 31. uploadImages() { 32. // 遍历已选择的图片数组 33. this.images.forEach(image => { 34. uni.uploadFile({ 35. url: 'https://example.com/upload', // 上传图片的接口地址 36. filePath: image, 37. name: 'file', 38. formData: { 39. // 可以携带额外的参数 40. userId: '123456' 41. }, 42. success: res => { 43. console.log('上传成功', res.data); 44. // 处理上传成功后的逻辑 45. }, 46. fail: err => { 47. console.log('上传失败', err); 48. // 处理上传失败后的逻辑 49. } 50. }); 51. }); 52. } 53. } 54. }; 55. </script>
本篇结束感谢观看谢谢
