一、使用uni.uploadFile上传文件
1、首先在页面中添加文件选择器(input type="file" accept="image/*")的组件。
2、为文件选择器添加change事件,处理用户选择的文件并调用uni.uploadFile()函数上传文件。
3、完成文件上传后,服务器返回的数据可以在uni.uploadFile()的回调函数中处理。
<template>
<view>
<input type="file" accept="image/*" @change="uploadFile" />
</view>
</template>
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
uni.uploadFile({
url: 'http://localhost:3000/upload',
filePath: file.tempFilePath,
name: 'file',
success(res) {
console.log(res.data);
}
});
}
}
}
</script>
二、设置请求头和参数
1、通过uni.uploadFile()第三个参数的header属性设置请求头。
2、通过uni.uploadFile()第三个参数的formData属性设置参数。
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
uni.uploadFile({
url: 'http://localhost:3000/upload',
filePath: file.tempFilePath,
name: 'file',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token')
},
formData: {
'name': 'avatar'
},
success(res) {
console.log(res.data);
}
});
}
}
}
</script>
三、限制文件类型和大小
1、通过accept参数限制文件类型。
2、通过fileSize参数限制文件大小。
<template>
<view>
<input type="file" accept="image/png,image/jpeg" :fileSize="1024 * 1024" @change="uploadFile" />
</view>
</template>
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
uni.uploadFile({
url: 'http://localhost:3000/upload',
filePath: file.tempFilePath,
name: 'file',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token')
},
formData: {
'name': 'avatar'
},
success(res) {
console.log(res.data);
}
});
}
}
}
</script>
四、显示上传进度
1、通过uni.uploadFile()函数的progress属性实现上传进度显示。
2、在页面中添加进度条组件,并将进度值绑定到data中的progress变量。
<template>
<view>
<input type="file" accept="image/png,image/jpeg" :fileSize="1024 * 1024" @change="uploadFile" />
<progress :percent="progress" />
</view>
</template>
<script>
export default {
data() {
return {
progress: 0
}
},
methods: {
uploadFile(event) {
const file = event.target.files[0];
uni.uploadFile({
url: 'http://localhost:3000/upload',
filePath: file.tempFilePath,
name: 'file',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token')
},
formData: {
'name': 'avatar'
},
success(res) {
console.log(res.data);
},
progressCallback(res) {
this.progress = res.progress;
}
});
}
}
}
</script>
五、使用uni.compressImage()压缩图片
1、上传大量图片可能会导致上传速度变慢,同时也会消耗用户手机的流量。
2、通过uni.compressImage()函数将图片压缩后再上传,可以减少上传时间和流量消耗。
<script>
export default {
methods: {
uploadFile(event) {
const file = event.target.files[0];
uni.compressImage({
src: file.tempFilePath,
quality: 80,
success(res) {
uni.uploadFile({
url: 'http://localhost:3000/upload',
filePath: res.tempFilePath,
name: 'file',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token')
},
formData: {
'name': 'avatar'
},
success(res) {
console.log(res.data);
},
progressCallback(res) {
console.log(res.progress);
}
});
}
});
}
}
}
</script>