用uniapp开发一个软件,需要支持h5、Android、微信小程序,有一个裁剪头像功能,裁剪完成后,h5返回base64格式的图片,转成 File 对象(二进制)已经实现了上传;但是打包后,发现裁剪(选图)后,得到的都是一个类似_doc/uniapp_temp_1687159196909/canvas/16871592179990.png
的地址,这没法调用后台上传接口,然后找方法吧这个临时图片转成 base64 后,又发现没法调用 web api 转成 file 二进制文件,改怎么处理呢?
搞定:
handleChange(datas) {
// h5 下,获取到 base64 格式图片;
// 非 h5(app),获取到的是图片的临时路径;类似 _doc/uniapp_temp_1687159196909/canvas/16871592179990.png
let base64 = datas.url
//#ifdef H5
// h5 时,转成File图片二进制
let fileTemp = dataURLtoFile(base64, 'avatar.png')
let fileObj = {
fileType: "image",
name: "avatar.png",
file: fileTemp,
}
//#endif
http.upload('xxxx/UploadFile', {
// baseURL: '',
params: {}, /* 会加在url上 */
// #ifdef H5
files: [fileObj], // 需要上传的文件列表。使用 files 时,filePath 和 name 不生效。App、H5( 2.6.15+)
// #endif
// #ifdef MP-ALIPAY
fileType: 'image/video/audio', // 仅支付宝小程序,且必填。
// #endif
// #ifndef H5
filePath: base64, // 要上传文件资源的路径。(非 h5,直接使用临时路径)
// #endif
name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// #ifdef H5 || APP-PLUS
timeout: 30000, // H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)
// #endif
header: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}, /* 会与全局header合并,如有同名属性,局部覆盖全局 */
custom: {}, // 自定义参数
formData: {
}, // HTTP 请求中其他额外的 form data
// 返回当前请求的task, options。请勿在此处修改options。非必填
getTask: (task, options) => {
// setTimeout(() => {
// task.abort()
// }, 500)
},
//validateStatus: (statusCode) => { // statusCode 必存在。此处示例为全局默认配置。演示,非必填选项
// return statusCode >= 200 && statusCode < 300
//},
// 自定义处理params 函数
//paramsSerializer: (params) => {
// return qs.stringify(params)
//}
}).then(res => {
if(res) {
this.toast('保存成功')
}
}).catch(err => {
this.toast('上传失败,请重新尝试')
})
},
uni.uploadFile(OBJECT)
使用filePath
https://uniapp.dcloud.net.cn/api/request/network-file.html