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
        }
    );
    
    //...调保存接口
}
相关推荐
敲敲了个代码6 分钟前
前端指纹技术是如何实现的?(Canvas、Audio、硬件API 核心原理解密)
前端·javascript·学习·算法·面试·web
Amumu1213810 分钟前
Vue简介
前端·javascript·vue.js
放逐者-保持本心,方可放逐11 分钟前
React核心组件 及 钩子函数应用
前端·javascript·react.js·非阻塞更新·延迟更新·同步更新
小宇的天下11 分钟前
Calibre nmDRC-H 层级化 DRC
java·服务器·前端
怒放de生命201019 分钟前
前端子包+docker流水线部署+nginx代理部署
前端·nginx·docker
0思必得028 分钟前
[Web自动化] Selenium浏览器对象属性
前端·python·selenium·自动化·web自动化
小二·33 分钟前
Python Web 开发进阶实战:边缘智能网关 —— 在 Flask + Vue 中构建轻量级 IoT 边缘计算平台
前端·python·flask
是毛毛吧36 分钟前
GitHub热榜----前端已死?AionUi 横空出世:首个开源“生成式UI”框架,让 AI 在运行时“手搓”界面
前端·开源·github
斯普信专业组40 分钟前
ReAct Agent 解析:从理论到实践的高效推理框架
前端·react.js·前端框架
徐同保41 分钟前
开发onlyoffice插件,功能是选择文本后立即通知父页面
开发语言·前端·javascript