小程序：视频管理

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.js

@@ -3,7 +3,15 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    fileList: [
+      {
+        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
+        status: 'uploading',
+        message: '上传中'
+      }
+    ]
+  },
 
   /**
    * 生命周期函数--监听页面加载
@@ -59,6 +67,34 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  beforeRead(event) {
+    const { file, callback } = event.detail
+    callback(file.type === 'image')
+  },
+  afterRead(event) {
+    const { file } = event.detail
+    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
+    wx.uploadFile({
+      url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
+      filePath: file.url,
+      name: 'file',
+      formData: { user: 'test' },
+      success(res) {
+        // 上传完成需要更新 fileList
+        const { fileList = [] } = this.data
+        fileList.push({ ...file, url: res.data })
+        this.setData({ fileList })
+      }
+    })
+  },
+  delete(event) {
+    const { index } = event.detail
+
+    this.data.fileList.splice(index, 1)
+    this.setData({
+      fileList: this.data.fileList
+    })
   },
   onSubmit(e) {
     console.log(e.detail)

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "van-uploader": "@vant/weapp/uploader/index"
+  },
   "navigationBarTitleText": "产品编辑"
 }

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.scss

@@ -31,17 +31,12 @@ label {
 
 .photo {
   .value {
-    width: 142rpx;
-    height: 91rpx;
     margin: 30rpx 0 45rpx;
-    overflow: hidden;
   }
 
-  image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: pink;
+  .van-uploader__preview,
+  .van-uploader__upload {
+    margin: 0 !important;
   }
 }
 

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.wxml

@@ -7,7 +7,16 @@
           <text>(0/1)</text>
         </label>
         <view class="value">
-          <image src=""></image>
+          <van-uploader
+            file-list="{{ fileList }}"
+            sizeType="['original','compressed']"
+            multiple="{{false}}"
+            max-count="1"
+            accept="image"
+            use-before-read
+            bind:before-read="beforeRead"
+            bind:after-read="afterRead"
+            bind:delete="delete"/>
         </view>
       </view>
       <view class="swiper-photo">
@@ -17,7 +26,7 @@
         </label>
         <view class="value">
           <view>
-            
+
           </view>
           <image class="btn-upload" src=""></image>
         </view>
@@ -56,7 +65,8 @@
       <button
         class="btn-submit edit"
         type="primary"
-        form-type="submit">编 辑</button>
+        form-type="submit">编 辑
+      </button>
     </form>
   </view>
 </view>

htmldev/wxMini/project.private.config.json

@@ -3,7 +3,19 @@
     "urlCheck": false,
     "compileHotReLoad": true
   },
-  "condition": {},
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "111",
+          "pathName": "pages/businessGoodsEdit/businessGoodsEdit",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "libVersion": "2.13.2",
   "projectname": "%E5%A7%8B%E5%AE%81%E5%86%9C%E4%B8%9A"