UNIAPP 实现的复杂功能：照相和上传图片到服务器
在许多移动应用中，照相并上传图片是一项常见的需求，比方用户头像上传、商品图片上传等。本文将介绍如何在 UNIAPP 中实现照相和上传图片到服务器的功能。该功能涉及到调用装备的摄像头、选择图片、上传图片文件到服务器并显示上传的效果。功能形貌
该功能将允许用户：
[*]使用装备摄像头照相并选择图片。
[*]将选择的图片通过文件上传功能上传至服务器。
[*]上传图片后，展示图片上传的状态和上传后的图片链接。
功能要求
[*]选择图片或照相：允许用户通过摄像头照相或从相册中选择图片。
[*]上传图片：将选择的图片上传到服务器，支持发送文件和额外的表单数据。
[*]展示图片：上传乐成后，展示图片或图片链接。
[*]错误处理：如果上传失败，展示相应的错误信息。
技术栈
[*]照相与选择图片：使用 uni.chooseImage API 选择图片，支持从相册或照相。
[*]上传文件：使用 uni.uploadFile API 将选择的图片上传到服务器。
[*]展示图片：上传乐成后，展示图片链接或展示图片。
1. 前端代码实现
页面实现
<!-- pages/upload/upload.vue -->
<template>
<view class="container">
<view class="header">UNIAPP 图片上传功能</view>
<!-- 显示选中的图片 -->
<view class="image-preview">
<image :src="imageUrl" v-if="imageUrl" class="image-uploaded" />
<text v-if="!imageUrl">暂无图片</text>
</view>
<!-- 上传图片按钮 -->
<button @click="chooseImage" class="upload-button">选择图片</button>
<!-- 上传进度条 -->
<view v-if="isUploading" class="uploading-info">
<text>上传中... {{ uploadProgress }}%</text>
<progress :percent="uploadProgress" show-info></progress>
</view>
<!-- 上传成功提示 -->
<view v-if="uploadSuccess" class="upload-success">
<text>上传成功！</text>
<text>图片链接: {{ uploadedImageUrl }}</text>
</view>
<!-- 上传失败提示 -->
<view v-if="uploadError" class="upload-error">
<text>上传失败，请重试！</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageUrl: '', // 用户选择的图片
isUploading: false, // 是否正在上传
uploadProgress: 0, // 上传进度
uploadSuccess: false, // 上传是否成功
uploadError: false, // 上传是否失败
uploadedImageUrl: '', // 上传成功后返回的图片URL
};
},
methods: {
// 选择图片或拍照
chooseImage() {
uni.chooseImage({
count: 1, // 选择1张图片
sourceType: ['album', 'camera'], // 支持从相册和摄像头选择
success: (res) => {
// 获取选择的图片路径
this.imageUrl = res.tempFilePaths;
this.uploadImage(this.imageUrl); // 上传图片
},
fail: (err) => {
uni.showToast({ title: '选择图片失败', icon: 'none' });
}
});
},
// 上传图片
uploadImage(filePath) {
this.isUploading = true;
this.uploadProgress = 0;
this.uploadSuccess = false;
this.uploadError = false;
// 假设的服务器地址
const uploadUrl = 'https://example.com/upload';
// 使用 uni.uploadFile 上传文件
uni.uploadFile({
url: uploadUrl,// 服务器上传地址
filePath: filePath,// 文件路径
name: 'file',// 文件域名
formData: {
'user': 'example'// 可以传递额外的表单数据
},
success: (uploadRes) => {
// 上传成功
const data = JSON.parse(uploadRes.data);
if (data.success) {
this.uploadSuccess = true;
this.uploadedImageUrl = data.imageUrl; // 假设返回图片的URL
} else {
this.uploadError = true;
}
this.isUploading = false;
},
fail: (err) => {
// 上传失败
this.uploadError = true;
this.isUploading = false;
},
// 上传进度回调
progress: (progressEvent) => {
if (progressEvent.lengthComputable) {
this.uploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
}
}
});
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
}
.header {
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.image-preview {
text-align: center;
margin-bottom: 20px;
}
.image-uploaded {
width: 100%;
max-width: 300px;
margin-bottom: 20px;
}
.upload-button {
padding: 10px;
background-color: #007bff;
color: white;
border: none;
text-align: center;
margin-bottom: 20px;
}
.uploading-info {
margin-top: 20px;
}
.upload-success {
margin-top: 20px;
color: green;
}
.upload-error {
margin-top: 20px;
color: red;
}
</style>
2. 使用分析
1. 选择图片或照相
用户可以点击“选择图片”按钮，从相册中选择一张图片或使用摄像头照相。选中的图片会展示在页面上。
2. 上传图片
[*]当用户选择完图片后，图片会立即开始上传，上传进度会及时显示在页面上。
[*]uni.uploadFile 会将图片上传到服务器。在实际使用中，你需要更换 uploadUrl 为真实的服务器接口。
3. 显示上传状态
[*]在图片上传过程中，进度条会显示当前上传的进度（0%-100%）。
[*]上传乐成后，显示乐成提示以及返回的图片URL。
[*]上传失败时，页面会显示上传失败的提示，用户可以重试。
4. 错误处理
如果上传过程中发生错误，体系会通过 fail 回调处理，并显示上传失败的信息。
5. 测试与调试
[*]该功能需要在真实装备上举行测试，尤其是摄像头和图片选择部分。
[*]服务器端需要有一个可以接收文件上传的接口，并返回图片的URL，确保与客户端的上传接口一致。
3. 扩展功能
[*]多图上传：可以通过 chooseImage API 设置 count 为大于1的值，实现多图选择和上传。
[*]图片裁剪与编辑：用户可以在选择图片后举行裁剪、旋转或编辑，上传前对图片举行优化。
[*]文件类型与巨细限制：对上传的图片举行巨细和类型限制，确保上传的图片符合要求。
[*]上传汗青记载：用户上传过的图片可以展示汗青记载，方便查看。
总结
通过 UNIAPP 实现的这套图片上传功能，用户可以选择图片或照相并上传至服务器。该功能涉及到图片选择、文件上传、进度显示和错误处理等内容，适用于需要图片上传的各种应用场景。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]