例如上传头像:
用到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: '', //上传接口需要tokenavatar: '' //上传后的头像图片地址}},onLoad() {let token = uni.getStorageSync('token') //获取tokenthis.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 //拼接得到服务器图片地址}}})}})}
文章评论