小程序：视频管理

htmldev/wxMini/api/request.js

@@ -121,11 +121,11 @@ function request(options = {}, keepLogin = true) {
   })
 }
 
-function handleUpload(filePath) {
+function handleUpload(file) {
   return new Promise((resolve, reject) => {
     wx.uploadFile({
       url: `${req.baseURL}/api/upload/img`,
-      filePath: filePath,
+      filePath: file.filePath,
       name: 'file',
       formData: {
         'user': 'test'
@@ -134,9 +134,8 @@ function handleUpload(filePath) {
         const isSuccess = isHttpSuccess(r.statusCode)
         if (isSuccess) {
           const temp = JSON.parse(r.data)
-          if (temp.status && Object.prototype.toString.call(temp.data) === '[object Object]' &&
-            temp.data.path) {
-            resolve(temp.data.path)
+          if (temp.status && Object.prototype.toString.call(temp.data) === '[object Object]' && temp.data.path) {
+            resolve({ ...file, url: temp.data.path })
           } else {
             reject(r)
           }

htmldev/wxMini/mixin/upload.js

@@ -0,0 +1,78 @@
+const { handleUpload } = require('../api/request')
+
+module.exports = {
+  compressJs(file) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        const { errMsg, tempFilePath } = await wx.compressImage({
+          src: file.filePath, // 图片路径
+          quality: 80 // 压缩质量
+        })
+
+        if (errMsg === 'compressImage:ok') {
+          resolve({ ...file, filePath: tempFilePath })
+          return
+        }
+        resolve(file)
+      } catch (err) {
+        resolve(file)
+      }
+    })
+  },
+  async afterRead(event) {
+    const { form } = this.data
+    const { file } = event.detail
+    const { formkey, maxsize = '2' } = event.currentTarget.dataset
+    const maxSize = maxsize * 1024 * 1024
+    let _file = file
+
+    if (Object.prototype.toString.call(file) === '[object Object]') {
+      _file = [file]
+    }
+
+    wx.showToast({
+      title: '上传中',
+      icon: 'loading',
+      duration: 600 * 1000
+    })
+
+    const result = _file.map(async item => {
+      // 压缩图片时传入的路径
+      item.filePath = item.url
+      item.formkey = formkey
+      // item.url = ''
+
+      const compressResult = item.size > maxSize ? await this.compressJs(item) : item
+
+      return handleUpload(compressResult)
+    })
+
+    try {
+      const res = await Promise.all(result)
+
+      this.setData({
+        ['form.' + formkey]: form[formkey].concat(...res)
+      })
+      wx.showToast({
+        title: '上传成功',
+        icon: 'success',
+        duration: 2000
+      })
+    } catch (err) {
+      wx.showToast({
+        title: '上传出错',
+        icon: 'none',
+        duration: 2000
+      })
+    }
+  },
+  delete(event) {
+    const { formkey } = event.currentTarget.dataset
+    const { index } = event.detail
+
+    this.data.form[formkey].splice(index, 1)
+    this.setData({
+      ['form.' + formkey]: this.data.form[formkey]
+    })
+  }
+}

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.js

@@ -1,16 +1,14 @@
+const uploadJS = require('../../mixin/upload.js')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    fileList: [
-      {
-        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
-        status: 'uploading',
-        message: '上传中'
-      }
-    ]
+    form: {
+      'photo': []
+    }
   },
 
   /**
@@ -68,34 +66,7 @@ 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
-    })
-  },
+  ...uploadJS,
   onSubmit(e) {
     console.log(e.detail)
   }

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.scss

@@ -1,6 +1,7 @@
 .wrapper {
   width: 100%;
   padding-top: 30rpx;
+  padding-bottom: 276rpx;
 }
 
 .width-690 {
@@ -29,8 +30,18 @@ label {
   }
 }
 
+.van-uploader-wrap {
+  margin: 0 16rpx 16rpx 0;
+
+  &:nth-of-type(4n) {
+    margin: 0;
+  }
+}
+
 .photo {
   .value {
+    display: flex;
+    flex-flow: row wrap;
     margin: 30rpx 0 45rpx;
   }
 
@@ -69,7 +80,7 @@ label {
   margin: 40rpx 0 30rpx;
 
   .value {
-    width: calc(100% - 84rpx);
+    width: calc(100% - 150rpx);
   }
 
   input {

htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.wxml

@@ -7,16 +7,17 @@
           <text>(0/1)</text>
         </label>
         <view class="value">
-          <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
+            class="van-uploader-wrap">
+            <van-uploader
+              file-list="{{ form.photo }}"
+              multiple="{{false}}"
+              max-count="1"
+              accept="image"
+              data-formkey="photo"
+              bind:after-read="afterRead"
+              bind:delete="delete"/>
+          </view>
         </view>
       </view>
       <view class="swiper-photo">
@@ -25,10 +26,36 @@
           <text>(1/5)</text>
         </label>
         <view class="value">
-          <view>
-
+          <view
+            class="van-uploader-wrap">
+            <van-uploader
+              file-list="{{ form.photo }}"
+              multiple="{{false}}"
+              max-count="1"
+              accept="image"
+              data-formkey="photo"
+              bind:after-read="afterRead"
+              bind:delete="delete"/>
+          </view>
+        </view>
+      </view>
+      <view class="swiper-photo">
+        <label>
+          <text>商品详情图</text>
+          <text>(1/5)</text>
+        </label>
+        <view class="value">
+          <view
+            class="van-uploader-wrap">
+            <van-uploader
+              file-list="{{ form.photo }}"
+              multiple="{{false}}"
+              max-count="1"
+              accept="image"
+              data-formkey="photo"
+              bind:after-read="afterRead"
+              bind:delete="delete"/>
           </view>
-          <image class="btn-upload" src=""></image>
         </view>
         <view class="tip">请上传尺寸为375*375像素图片</view>
       </view>
@@ -39,7 +66,7 @@
         <view class="value">
           <input
             value=""
-            placeholder="输入视频标题"
+            placeholder="输入商品标题"
             placeholder-class="placeholder"></input>
         </view>
       </view>
@@ -47,7 +74,7 @@
         <view class="value">
           <textarea
             value=""
-            placeholder="请输入视频简介"
+            placeholder="请输入商品简介"
             placeholder-class="placeholder"
             maxlength="{{200}}"
             auto-height="{{true}}"></textarea>
@@ -56,11 +83,51 @@
       </view>
       <view class="type">
         <label>
-          <text>视频类型</text>
+          <text>商品分类</text>
         </label>
-        <view class="value placeholder">请选择视频类型</view>
+        <view class="value placeholder">请选择商品分类</view>
         <image class="arrow" src=""></image>
       </view>
+      <view class="name">
+        <label>
+          <text>商品品牌</text>
+        </label>
+        <view class="value">
+          <input
+            value=""
+            placeholder="输入商品品牌"
+            placeholder-class="placeholder"></input>
+        </view>
+      </view>
+      <view class="name">
+        <label>
+          <text>商品规格</text>
+        </label>
+        <view class="value">
+          <input
+            value=""
+            placeholder="输入商品规格"
+            placeholder-class="placeholder"></input>
+        </view>
+      </view>
+      <view class="type">
+        <label>
+          <text>单 位</text>
+        </label>
+        <view class="value placeholder">请选择商品单位</view>
+        <image class="arrow" src=""></image>
+      </view>
+      <view class="name">
+        <label>
+          <text>商品货号</text>
+        </label>
+        <view class="value">
+          <input
+            value=""
+            placeholder="输入商品货号"
+            placeholder-class="placeholder"></input>
+        </view>
+      </view>
       <!-- 编 辑: edit 发 布: send-->
       <button
         class="btn-submit edit"