uni-app vue打包app 上传图片问题

开发环境	版本号	项目创建方式
HBuilderX	3.1.13

示例代码：

uploadPortrait(flag) { console.log("=====flag======", flag); this.uploadFlag = flag; this.$refs.clearFile.click(); //上传文件 }, uploadImg(e) { console.log("====ee====", e); let file = e.target.files || e.dataTransfer.files; //target事件 // let docObj = document.getElementById(“file”); console.log("=======file=====", file); // console.log("=======file===111==", docObj.files); this.uploadBackstage(file); // this.$refs.clearFile.value = “”; //上传文件后重置 }, uploadBackstage(files) { let formData = new window.FormData(); formData.append(“userId”, this.userId); formData.append(“type”, 1); // let mainUrls = “http://120.26.91.101/api/daikin/userPublicInfo/upload”; // let imgPath = “”; for (let i = 0; i < files.length; i++) { formData.append(“multipartFile”, files[i]); // imgPath = this.getUrl(files[i]); console.log("====getUrl===", files[i].name); } upload(formData) .then(res => { this.$refs.clearFile.value = “”; console.log(“res===”, this.uploadFlag); if (this.uploadFlag === 1) { this.form.portrait = res.body.url; } else if (this.uploadFlag === 2) { this.form.backgroundPortrait = res.body.url; } console.log("====this.form.portrait====", this.form.portrait); }) .catch(() => { this.$refs.clearFile.value = “”; }); }


### 操作步骤：


- 点击上传图片

预期结果：

图片上传成功


### 实际结果：


- 接口报错

bug描述：

通过

更多关于uni-app vue打包app 上传图片问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 1楼作者

更多关于uni-app vue打包app 上传图片问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在uni-app中，使用<input type="file">的方式上传图片在Web端可行，但在打包成App时会出现兼容性问题。这是因为App环境（特别是Android和iOS）对文件输入控件的支持有限，且安全策略不同。

推荐使用uni-app官方提供的uni.chooseImage API替代原生input方式：

uploadPortrait(flag) {
  this.uploadFlag = flag;
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      const tempFilePaths = res.tempFilePaths;
      this.uploadBackstage(tempFilePaths);
    }
  });
}

uploadBackstage(filePaths) {
  uni.uploadFile({
    url: '你的上传接口地址',
    filePath: filePaths[0],
    name: 'multipartFile',
    formData: {
      userId: this.userId,
      type: 1
    },
    success: (res) => {
      const data = JSON.parse(res.data);
      if (this.uploadFlag === 1) {
        this.form.portrait = data.body.url;
      } else if (this.uploadFlag === 2) {
        this.form.backgroundPortrait = data.body.url;
      }
    },
    fail: (err) => {
      console.log('上传失败', err);
    }
  });
}