uinapp 图片回显上传MiniProgramError {"errMsg":"uploadFile:fail createUploadTask:fail f

例如我有一个以下表单需要提交并回显修改,在实现表单回显的时候按照惯性的思路

1、访问接口,如果后端返回图片则将图片放在对应的位置

2、当用户提交则判断图片资源是否是远程路径,如果是则不需要上传,不是则上传图片资源;

3、图片上传完成后调用提交接口保存数据

实际上在执行第二步,判断图片是否是远程路径时报错了,错误信息如下:

js 复制代码
MiniProgramError {"errMsg":"uploadFile:fail createUploadTask:fail file not found"}

开始以为是微信小程序模拟器问题,pc端的路径和真机有加密区别,后面又使用真机测试下,报以下错误:

js 复制代码
[wxapplib]] backgroundfetch privacy fail {"errno":101,"errMsg":"private_getBackgroundFetchData:fail private_getBackgroundFetchData:fail:jsapi invalid request data"}

我的乖乖还是存在问题,秉承着我肯定不是最后一个遇到这个问题的人,去百度找找答案看到下面这条评论: 原评论地址:developers.weixin.qq.com/community/d...

好家伙,原来uploadFile上传只能填充本地路径,那么如果将网络路径现在在本地则需要将网络地址下载到本地,提交的时候重新将本地地址上传到服务器中,难怪在uinapp的官网会将文件上传和文件下载两个方法放在一起:

找到思路那就实现功能: 1、第一步初始化判断后端返回的接口用户是否已经填过 2、将远程图片地址下载到本地临时路径下,下面举个例子:

(1) 例如我封装newhttp请求并在main.js挂载在到ue.prototype.$newhttp = $newhttp;

js 复制代码
upload(filePath){
    return uni.uploadFile({
        url:this.config.baseUrl+urls.uploadFile,
        name:'file',
        filePath
    })
},
downloadFile(url){
    return new Promise(
    (resolve,reject)=>{
        uni.downloadFile({
                url,
                success: (res) => {
                        if (res.statusCode === 200) {
                                console.log('下载成功',res.tempFilePath);
                                resolve(res.tempFilePath);
                        }else{
                                reject(res);
                        }
                }
        });
    }
);

(2) 在页面初始化的时候调接口获取数据,再将远程的地址下载下列到本地临时缓存,再将数据保存到对于的变量中。 下面这是段伪代码方便理解没啥其他意义不能运行

js 复制代码
async mounted() {
     let info = await await this.$newhttp.get("providerinfo",{}); //调接口
     //远程的地址下载下列到本地临时缓存
     let imgurl = await  this.$newhttp.downloadFile(info.business_license);
      this.businessLicensePhotos =  [imgurl];
     
},

3、执行提交方法formSubmit将本地图片上传到服务器,再保存。

js 复制代码
async formSubmit() {
       // ...必填检验
    //将本地图片上传到服务器
    let businessLicensePhoto = await this.$newhttp.upload(this.businessLicensePhotos[0]).then(
        (res)=>{
            return JSON.parse(res.data).data.fullurl
        }
    );
    
    //...调保存接口
}
相关推荐
前端大卫9 分钟前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘24 分钟前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare25 分钟前
浅浅看一下设计模式
前端
Lee川29 分钟前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix1 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人1 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl1 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人1 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼1 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端