init

xhs-mini-demos/component-case/upload-file/upload-file.css

@@ -0,0 +1,14 @@
+.image {
+  width: 100%;
+  height: 330px;
+}
+.page-body-info {
+  display: flex;
+  box-sizing: border-box;
+  padding: 15px;
+  height: 410px;
+  border-top: 1px solid var(--weui-FG-3);
+  border-bottom: 1px solid var(--weui-FG-3);
+  align-items: center;
+  justify-content: center;
+}

xhs-mini-demos/component-case/upload-file/upload-file.js

@@ -0,0 +1,82 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '上传文件',
+      path: 'packageAPI/pages/upload-file/upload-file',
+    };
+  },
+  count: 0,
+  data: {
+    apiData: {
+      content: '',
+      success: false,
+      fail: false,
+      complete: false,
+    },
+  },
+
+  resetApiData() {
+    this.setData({
+      apiData: {
+        success: false,
+        fail: false,
+        complete: false,
+        content: '',
+      },
+    });
+  },
+
+  updateApiData(type, content) {
+    const apiData = { ...this.data.apiData };
+    apiData[type] = true;
+    apiData.content = content;
+    this.setData({ apiData });
+  },
+
+  chooseImage() {
+    xhs.chooseImage({
+      count: 1,
+      sizeType: ['compressed'],
+      sourceType: ['album'],
+      success: res => {
+        this.count += 1;
+        const imageSrc = res.tempFilePaths[0];
+        // 上传
+        this.taskHandle = xhs.uploadFile({
+          url: 'https://smartprogram.baidu.com/mappconsole/api/checkFile', // 上传至云端的路径
+          filePath: imageSrc, // 小程序临时文件路径
+          name: `file${this.count}`,
+          success: res1 => {
+            this.updateApiData('success', res1);
+          },
+          fail: res1 => {
+            this.updateApiData('fail', res1);
+          },
+          complete: res1 => {
+            this.updateApiData('complete', res1);
+          },
+        });
+        // header 事件
+        this.taskHandle.onHeadersReceived(res1 => {
+          this.updateApiData('success', res1);
+        });
+        // progress事件
+        this.taskHandle.onProgressUpdate(res1 => {
+          this.updateApiData('success', res1);
+        });
+      },
+    });
+  },
+
+  abortHandle() {
+    this.taskHandle?.abort();
+  },
+
+  offHeadersReceived() {
+    this.taskHandle?.offHeadersReceived();
+  },
+
+  offProgressUpdateUploadTask() {
+    this.taskHandle?.offProgressUpdate();
+  },
+});

xhs-mini-demos/component-case/upload-file/upload-file.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "上传文件"
+}

xhs-mini-demos/component-case/upload-file/upload-file.xhsml

@@ -0,0 +1,21 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section">
+      <view class="page-body-info">
+        <block xhs:if="{{imageSrc}}">
+          <image src="{{imageSrc}}" class="image" mode="aspectFit"></image>
+        </block>
+        <block xhs:else>
+          <view class="image-plus image-plus-nb" bindtap="chooseImage">
+            <view class="image-plus-horizontal"></view>
+            <view class="image-plus-vertical"></view>
+          </view>
+          <view class="image-plus-text">选择图片</view>
+        </block>
+        <button bindtap="abortHandle">abort</button>
+        <button bindtap="offProgressUpdateUploadTask">offProgressUpdateUploadTask</button>
+        <button bindtap="offHeadersReceived">offHeadersReceived</button>
+      </view>
+    </view>
+  </view>
+</view>