uniapp在开发app时上传文件时的问题

手机拍照然后上传没问题 但是在相册中选择的照片上传 ios手机不行 安卓一部分手机也点击没反应
最后对比了下参数 发现路径有所不同
使用uni.saveFile保存路径好在重新上传

  saveFileSync(tempFilePath){
   return new Promise((resolve, reject) => {
     uni.saveFile({
       tempFilePath,
       success: function (file) {
         resolve(file.savedFilePath)
       },
       fail: function (error) {
         reject(error)
       }
     })
   })
 },
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图,默认二者都
        sourceType: ['camera','album'], 
         success: async function(result) {
          let ewm = result.tempFiles[0]
          const path = await that.saveFileSync(ewm.path)
          if (result.errMsg === "chooseImage:ok") {
            result.tempFiles[0].path=path
            // that.upload(path);
            that.upload(result.tempFiles[0]);
          } else {
            uni.showToast({
              title: "图片上传失败",
              icon: "none",
            });
          }
        },
        fail(err) {
          uni.showToast({
            title: "取消上传",
            icon: "none",
          });
        },
      });
Upload(event) {
      const token = this.getToken();
      // const url = this.getuploadUrl();
      const imgList = [];
      uni.showLoading({
        title: "上传中...",
        mask: true,
      });
      try {
        const [err, res] = await uni.uploadFile({
          url: `${HOST}/resource/file/upload`,
          filePath: event.path,
          name: "file",
          header: {
            Authorization: token,
          },
        });
       
        if (res && (res.statusCode === 200)) {
          const result = JSON.parse(res.data);
          if (result.code == 200) {
            let res1 = JSON.parse(res.data);
              res1.data.uuid = res1.data.id;
              res1.data.paramskey = event.name;
              imgList.push(res1.data);
              const list = [...this.list, ...imgList];
              this.$emit("value", list);
              this.$emit("change", list);
              this.$emit("upload", imgList);
          } else {
            wx.showToast({
              icon: "none",
              title: result.msg,
            });
          }
        } else {
          wx.showToast({
            icon: "error",
            title: "上传失败",
          });
        }
      } catch (error) {
        console.log(error)
      }
      uni.hideLoading();
      this.$emit("upload", imgList);
    },
       
### UniApp 文件上传实现方法 #### 使用 `uni.chooseFile` 方法选择文件上传 为了实现在 UniApp 中的文件上传功能,开发者可以通过调用 `uni.chooseFile` 接口来让用户从本地选取文件。此接口允许设置可选参数如最大选择数 (`count`) 和文件扩展名过滤 (`extension`) 来限定用户的选择范围[^2]。 ```javascript chooseFile() { uni.chooseFile({ count: 6, extension: ['.pdf'], success: (res) => { this.fileList = res.tempFiles; this.uploadFile(); }, fail: (err) => { console.error('Failed to select file:', err); } }); } ``` 上述代码片段展示了如何配置 `uni.chooseFile` 函数以限制用户仅能选择 PDF 类型文件,并且一次最多可以选择六个文件。当成功选择了文件之后,则会触发回调函数中的逻辑处理这些临文件路径列表,并准备执行实际的上传操作。 #### 定义上传文件的方法 接下来定义具体的上传行为,在这里假设已经有一个名为 `uploadFile()` 的异步函数用于处理文件的实际传输过程: ```javascript async function uploadFile(filePath){ try{ let response = await uniCloud.uploadFile({ filePath: filePath, cloudPath: 'uploads/' + new Date().getTime() + '.jpg', onProgress: progressEvent => { // 可在此处更新进度条或其他UI组件显示上传状态 } }) return response.fileID || ''; }catch(error){ throw error; } } ``` 这段 JavaScript 代码实现了通过 `uniCloud.uploadFile` API 向云端存储服务发送选定图片的功能。注意这里的 `cloudPath` 参数指定了目标保存位置以及可能的间戳命名方式防止重复覆盖;而 `onProgress` 回调可用于实反馈给前端界面关于当前上传任务的状态变化情况。 #### 整合选择与上传流程 最后一步就是把前面提到的选择和上传两个环节结合起来形成完整的交互体验。下面给出了一种基于点击事件触发的方式来进行整个工作流的操作示范: ```html <template> <view class="container"> <!-- 其他页面元素 --> <button @click="handleUpload">Select and Upload Files</button> </view> </template> <script> export default { data(){ return { fileList:[] }; }, methods:{ handleUpload(){ this.chooseFile(); }, chooseFile(){ /* ... */ },// 如上所示 async uploadFile(/*...*/){/*...*/}// 如上所示 } }; </script> ``` 在这个 Vue 组件模板里添加了一个按钮控件用来启动文件挑选动作,一旦完成即刻调用之前编写的 `chooseFile` 方法获取到待传入的数据集再进一步交给后台服务器端做持久化管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值