uniapp上传图片到服务器

2022年5月20日 301点热度 0人点赞 0条评论

例如上传头像:

用到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 //拼接得到服务器图片地址 } } }) } }) }

34690uniapp上传图片到服务器

这个人很懒,什么都没留下

文章评论