##### 第一种,点击按钮选择图片上传
<div class="avatar">
<image mode="" :src="data.profilePhoto || '../../static/index/1.jpg'"></image>
<text class="avatar-btn" @click="chooseImage">点击上传头像</text>
</div>
// 选择头像
chooseImage() {
uni.chooseImage({
count: 1, // 最多选择的图片数量,可以根据需求修改
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
// 选择图片成功
const tempFilePaths = res.tempFilePaths
this.uploadAvatar( tempFilePaths[0])
},
fail: (err) => {
// 选择图片失败
console.log('选择图片失败:', err.errMsg);
}
})
},
// 上传头像
uploadAvatar(avatar) {
console.log('上传文件地址: ', avatar)
uni.uploadFile({
url: this.action, //修改成自己的接口地址
filePath: avatar,
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
'Authorization': 'Bearer ' + token.getToken('token') // 设置你需要的自定义请求头
},
formData: {
// 可以添加额外的表单数据
},
success: res => {
const data = JSON.parse(res.data)
this.data.profilePhoto = data.data.url
},
fail: err => {
console.log('上传失败', err)
this.user = uni.getStorageSync('user')
}
})
},
第二种,upload上传
<div class="block">
<u-upload
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
name="3"
multiple
:maxCount="10"
:previewFullImage="true"
></u-upload>
</div>
// 删除图片
deletePic(event) {
this.fileList.splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.fileList.length
lists.map((item) => {
this.fileList.push({
...item,
status: 'uploading',
message: '上传中'
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFilePromise(lists[i].url)
let item = this.fileList[fileListLen]
this.fileList.splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
url: this.action, //修改成自己的接口地址
filePath: url,
name: 'file',
formData: {
},
success: (res) => {
const data = JSON.parse(res.data)
this.fileListImg.push(data.data.url)
}
});
})
},