uniapp框架下H5上传文件

Posted 2023-04-12

参考技术A

背景：

在 uniapp 开发中， uni.chooseImage 选择文件进行上传到服务器。在 app plus 的情况加可以使用 uni.uploadFile 。但是在 H5 的条件下选择文件的格式为 blob:file:///1234567777 ，没有办法使用 uni.uploadFile 。目前可以使用 XMLHttpRequest 上传。

uni-app上传头像/更改头像

参考技术A <view class="personal_Image">

<u-image v-if="avarShow" :src="_settingConfig.img+personalLists.yj_img" @click="alterHeade">

</u-image>

<u-image v-else :src="_settingConfig.img+avaer" @click="alterHeade"></u-image>

</view>

// 上传头像/更改头像

alterHeade()

uni.chooseImage(

count: 1, // 头像只上传1张

sourceType: ['original',

'compressed'

], // way是点击时传入的打开方式相机或相册  original 原图，compressed 压缩图，默认二者都有

success: async (chooseImageRes) =>

console.log('chooseImageRes', chooseImageRes)

//获取头像token的接口

// const data = await this.$api.api.user.getImgToken();

const tempFilePaths = chooseImageRes.tempFilePaths;

uni.uploadFile(

url: this._settingConfig.api + 'upload', // 上传地址

filePath: tempFilePaths[0],

name: 'file',

formData:

// token: data.data.body, //头像token，参考返回数据

// key: chooseImageRes.tempFiles[0], // 图片名，移动端可能不存在name，可修改为 key: new Date().getTime()+".png" 随机

type: 1,

path: chooseImageRes.tempFiles[0],

// openid: this._settingConfig.openid

,

success: (uploadFileRes) =>

// console.log('uploadFileRes', uploadFileRes); //是一个字符串

var stra = JSON.parse(uploadFileRes.data);

// console.log('*******', stra); //是一个字符串

this.avaer = stra.data.path.yj_path

// this.avarShow = false

this.Req('PersonalData/upImg',

yj_img: stra.data.path.yj_id

, 'post')

.then(res =>

// console.log(res.data)

this.dataLists()

).catch(err => )



);



)