例如上传头像:
用到uniapp的两个api:uni.chooseImage 和 uni.uploadFile
<view class="avatar" @click="changeAvatar">
<text>头像</text>
<image :src="avatar?avatar:'../../static/upload.png'" mode="aspectFill"></image>
</view>
<script>
import {baseUrl} from '@/config/index.js' //导入公共域名
export default {
data() {
return {
token: '', //上传接口需要token
avatar: '' //上传后的头像图片地址
}
},
onLoad() {
let token = uni.getStorageSync('token') //获取token
this.token = token // 赋值token
},
methods: {
// 选择头像图片
changeAvatar() {
uni.chooseImage({
count: 1, //图片可选择数量
sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
sourceType: ['album'], //album 从相册选图,camera 使用相机,默认二者都有。
crop: { //是否进行裁剪,此配置一般用于头像上传时裁剪成正方形等
width: 100,
height: 100
},
success: res => {
uni.uploadFile({
url: baseUrl + '/api/upload_image', //域名拼接上传接口
method: 'POST', //请求方式
filePath: res.tempFilePaths[0],
name: 'images',
header: {
'authori-zation': 'Bearer ' + this.token // 添加请求头token
},
success: (response) => {
console.log(response);
if (response) {
let ImgUrl = JSON.parse(response.data)
console.log(ImgUrl.data.url);
uni.showToast({
title: response.data.msg //上传后的提示
})
this.avatar = baseUrl + ImgUrl.data.url //拼接得到服务器图片地址
}
}
})
}
})
}
文章评论