UNIAPP 实现的复杂功能：照相和上传图片到服务器

在许多移动应用中，照相并上传图片是一项常见的需求，比方用户头像上传、商品图片上传等。本文将介绍如何在 UNIAPP 中实现照相和上传图片到服务器的功能。该功能涉及到调用装备的摄像头、选择图片、上传图片文件到服务器并显示上传的效果。
功能形貌

该功能将允许用户：

• 使用装备摄像头照相并选择图片。
  
• 将选择的图片通过文件上传功能上传至服务器。
  
• 上传图片后，展示图片上传的状态和上传后的图片链接。
  

功能要求

• 选择图片或照相：允许用户通过摄像头照相或从相册中选择图片。
  
• 上传图片：将选择的图片上传到服务器，支持发送文件和额外的表单数据。
  
• 展示图片：上传乐成后，展示图片或图片链接。
  
• 错误处理：如果上传失败，展示相应的错误信息。
  

技术栈

• 照相与选择图片：使用 uni.chooseImage API 选择图片，支持从相册或照相。
  
• 上传文件：使用 uni.uploadFile API 将选择的图片上传到服务器。
  
• 展示图片：上传乐成后，展示图片链接或展示图片。
  

1. 前端代码实现

页面实现

1. <!-- pages/upload/upload.vue -->
2. <template>
3.   <view class="container">
4.     <view class="header">UNIAPP 图片上传功能</view>
6.     <!-- 显示选中的图片 -->
7.     <view class="image-preview">
8.       <image :src="imageUrl" v-if="imageUrl" class="image-uploaded" />
9.       <text v-if="!imageUrl">暂无图片</text>
10.     </view>
12.     <!-- 上传图片按钮 -->
13.     <button @click="chooseImage" class="upload-button">选择图片</button>
15.     <!-- 上传进度条 -->
16.     <view v-if="isUploading" class="uploading-info">
17.       <text>上传中... {{ uploadProgress }}%</text>
18.       <progress :percent="uploadProgress" show-info></progress>
19.     </view>
21.     <!-- 上传成功提示 -->
22.     <view v-if="uploadSuccess" class="upload-success">
23.       <text>上传成功！</text>
24.       <text>图片链接: {{ uploadedImageUrl }}</text>
25.     </view>
27.     <!-- 上传失败提示 -->
28.     <view v-if="uploadError" class="upload-error">
29.       <text>上传失败，请重试！</text>
30.     </view>
31.   </view>
32. </template>
34. <script>
35. export default {
36.   data() {
37.     return {
38.       imageUrl: '', // 用户选择的图片
39.       isUploading: false, // 是否正在上传
40.       uploadProgress: 0, // 上传进度
41.       uploadSuccess: false, // 上传是否成功
42.       uploadError: false, // 上传是否失败
43.       uploadedImageUrl: '', // 上传成功后返回的图片URL
44.     };
45.   },
46.   methods: {
47.     // 选择图片或拍照
48.     chooseImage() {
49.       uni.chooseImage({
50.         count: 1, // 选择1张图片
51.         sourceType: ['album', 'camera'], // 支持从相册和摄像头选择
52.         success: (res) => {
53.           // 获取选择的图片路径
54.           this.imageUrl = res.tempFilePaths[0];
55.           this.uploadImage(this.imageUrl); // 上传图片
56.         },
57.         fail: (err) => {
58.           uni.showToast({ title: '选择图片失败', icon: 'none' });
59.         }
60.       });
61.     },
63.     // 上传图片
64.     uploadImage(filePath) {
65.       this.isUploading = true;
66.       this.uploadProgress = 0;
67.       this.uploadSuccess = false;
68.       this.uploadError = false;
70.       // 假设的服务器地址
71.       const uploadUrl = 'https://example.com/upload';
73.       // 使用 uni.uploadFile 上传文件
74.       uni.uploadFile({
75.         url: uploadUrl,  // 服务器上传地址
76.         filePath: filePath,  // 文件路径
77.         name: 'file',  // 文件域名
78.         formData: {
79.           'user': 'example'  // 可以传递额外的表单数据
80.         },
81.         success: (uploadRes) => {
82.           // 上传成功
83.           const data = JSON.parse(uploadRes.data);
84.           if (data.success) {
85.             this.uploadSuccess = true;
86.             this.uploadedImageUrl = data.imageUrl; // 假设返回图片的URL
87.           } else {
88.             this.uploadError = true;
89.           }
90.           this.isUploading = false;
91.         },
92.         fail: (err) => {
93.           // 上传失败
94.           this.uploadError = true;
95.           this.isUploading = false;
96.         },
97.         // 上传进度回调
98.         progress: (progressEvent) => {
99.           if (progressEvent.lengthComputable) {
100.             this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
101.           }
102.         }
103.       });
104.     }
105.   }
106. };
107. </script>
109. <style scoped>
110. .container {
111.   padding: 20px;
112. }
113. .header {
114.   font-size: 24px;
115.   text-align: center;
116.   margin-bottom: 20px;
117. }
118. .image-preview {
119.   text-align: center;
120.   margin-bottom: 20px;
121. }
122. .image-uploaded {
123.   width: 100%;
124.   max-width: 300px;
125.   margin-bottom: 20px;
126. }
127. .upload-button {
128.   padding: 10px;
129.   background-color: #007bff;
130.   color: white;
131.   border: none;
132.   text-align: center;
133.   margin-bottom: 20px;
134. }
135. .uploading-info {
136.   margin-top: 20px;
137. }
138. .upload-success {
139.   margin-top: 20px;
140.   color: green;
141. }
142. .upload-error {
143.   margin-top: 20px;
144.   color: red;
145. }
146. </style>

复制代码

2. 使用分析

1. 选择图片或照相

用户可以点击“选择图片”按钮，从相册中选择一张图片或使用摄像头照相。选中的图片会展示在页面上。
2. 上传图片

• 当用户选择完图片后，图片会立即开始上传，上传进度会及时显示在页面上。
  
• uni.uploadFile 会将图片上传到服务器。在实际使用中，你需要更换 uploadUrl 为真实的服务器接口。
  

3. 显示上传状态

• 在图片上传过程中，进度条会显示当前上传的进度（0%-100%）。
  
• 上传乐成后，显示乐成提示以及返回的图片URL。
  
• 上传失败时，页面会显示上传失败的提示，用户可以重试。
  

4. 错误处理

如果上传过程中发生错误，体系会通过 fail 回调处理，并显示上传失败的信息。
5. 测试与调试

• 该功能需要在真实装备上举行测试，尤其是摄像头和图片选择部分。
  
• 服务器端需要有一个可以接收文件上传的接口，并返回图片的URL，确保与客户端的上传接口一致。
  

3. 扩展功能

• 多图上传：可以通过 chooseImage API 设置 count 为大于1的值，实现多图选择和上传。
  
• 图片裁剪与编辑：用户可以在选择图片后举行裁剪、旋转或编辑，上传前对图片举行优化。
  
• 文件类型与巨细限制：对上传的图片举行巨细和类型限制，确保上传的图片符合要求。
  
• 上传汗青记载：用户上传过的图片可以展示汗青记载，方便查看。
  

总结

通过 UNIAPP 实现的这套图片上传功能，用户可以选择图片或照相并上传至服务器。该功能涉及到图片选择、文件上传、进度显示和错误处理等内容，适用于需要图片上传的各种应用场景。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。