uniapp打包Android包上传如何上传图片?

2023-06-27 285 0

用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

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?