add: Upload

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "axios": "^0.20.0",
+        "blueimp-md5": "^2.18.0",
         "core-js": "^3.6.5",
         "cross-env": "^7.0.2",
         "js-cookie": "^2.2.1",
@@ -2552,6 +2553,11 @@
       "version": "3.7.2",
       "license": "MIT"
     },
+    "node_modules/blueimp-md5": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
+      "integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
+    },
     "node_modules/bn.js": {
       "version": "5.1.2",
       "license": "MIT"
@@ -14889,6 +14895,11 @@
     "bluebird": {
       "version": "3.7.2"
     },
+    "blueimp-md5": {
+      "version": "2.18.0",
+      "resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.18.0.tgz",
+      "integrity": "sha512-vE52okJvzsVWhcgUHOv+69OG3Mdg151xyn41aVQN/5W5S+S43qZhxECtYLAEHMSFWX6Mv5IZrzj3T5+JqXfj5Q=="
+    },
     "bn.js": {
       "version": "5.1.2"
     },

package.json

@@ -70,6 +70,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0",
+    "blueimp-md5": "^2.18.0",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
     "js-cookie": "^2.2.1",

src/api/account.js

@@ -37,3 +37,16 @@ export function getOpenId(data) {
     data
   })
 }
+
+// 获取oss signature
+export function getSignature() {
+  return httpRequest.get('/api/usercenter/aliyun/get-signature')
+}
+
+// 图片上传
+export function uploadFile(data) {
+  return httpRequest.post('https://webapp-pub.oss-cn-beijing.aliyuncs.com', data, {
+    withCredentials: false,
+    headers: { 'Content-Type': 'multipart/form-data' }
+  })
+}

src/components/Upload.vue

+<template>
+  <van-uploader
+    v-model="fileList"
+    :before-read="beforeRead"
+    :after-read="afterRead"
+    :max-size="maxSize"
+    @delete="onDelete"
+    @oversize="oversize"
+    v-bind="$attrs"
+  >
+  </van-uploader>
+</template>
+
+<script>
+import md5 from 'blueimp-md5'
+import { uploadFile, getSignature } from '@/api/account'
+export default {
+  name: 'Upload',
+  // 最大3M
+
+  props: {
+    value: String,
+    maxSize: { type: Number, default: 3 * 1024 * 1024 },
+    prefix: { type: String, default: 'upload/h5-shop/' }
+  },
+  data() {
+    return { fileList: [], data: {} }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(value) {
+        this.fileList = value ? [{ url: value }] : []
+      }
+    }
+  },
+  methods: {
+    oversize(file) {
+      const rawFile = file.file
+      if (rawFile.size > this.maxSize) {
+        this.$toast(`文件大小不能超过${this.maxSize / 1024}K`)
+      }
+    },
+    beforeRead(file) {
+      const fileName = file.name
+      const key = this.prefix + md5(fileName + new Date().getTime()) + fileName.substr(fileName.lastIndexOf('.'))
+      return new Promise((resolve, reject) => {
+        getSignature()
+          .then(response => {
+            const { accessid, policy, signature, host } = response
+            this.data = { key, OSSAccessKeyId: accessid, policy, signature, success_action_status: '200' }
+            file.url = `${host}/${key}`
+            resolve(file)
+          })
+          .catch(err => {
+            console.log(err)
+            reject(err)
+          })
+      })
+    },
+    afterRead(file) {
+      const rawFile = file.file
+      file.status = 'uploading'
+      file.message = '上传中...'
+      uploadFile(Object.assign({}, this.data, { file: rawFile }))
+        .then(() => {
+          file.status = 'done'
+          this.$emit('input', rawFile.url)
+        })
+        .catch(() => {
+          file.status = 'failed'
+          file.message = '上传失败'
+        })
+    },
+    onDelete() {
+      this.$emit('input', '')
+    }
+  }
+}
+</script>

src/pages/buy/components/BuyPopup.vue

@@ -23,7 +23,11 @@
           </div>
         </template>
       </van-field>
-      <van-field v-for="item in fieldsMap" v-model="form[item.key]" :key="item.key" :name="item.key" :label="item.label" :type="item.type" :placeholder="item.placeholder" :rules="[{ required: item.required, message: item.placeholder }, { validator: item.validator, message: item.errorMsg || '输入格式有误' }]"/>
+      <van-field v-for="item in fieldsMap" v-model="form[item.key]" :key="item.key" :name="item.key" :label="item.label" :type="item.type" :placeholder="item.placeholder" :rules="[{ required: item.required, message: item.placeholder }, { validator: item.validator, message: item.errorMsg || '输入格式有误' }]">
+        <template #input v-if="item.type === 'image'">
+          <app-upload v-model="form[item.key]" :max-count="1"></app-upload>
+        </template>
+      </van-field>
       <div style="margin: 16px;">
         <van-button type="primary" round block color="#C01540" size="small">下一步</van-button>
       </div>
@@ -40,8 +44,9 @@
 import TagSelection from '@/components/TagSelection.vue'
 import { getGoodsSpecs } from '@/api/common'
 import { mapGetters } from 'vuex'
+import AppUpload from '@/components/Upload'
 export default {
-  components: { TagSelection },
+  components: { TagSelection, AppUpload },
   props: {
     value: {
       type: Boolean,
@@ -167,12 +172,13 @@ export default {
     assembleFields(list) {
       const map = {
         text: { type: 'text', placeholder: '请填写留言' },
+        textarea: { type: 'textarea', placeholder: '请填写留言' },
         number: { type: 'number', placeholder: '请填写数字' },
         email: { type: 'text', placeholder: '请填写邮箱', errorMsg: '邮箱格式有误' },
         date: { type: 'text', placeholder: '请填写日期' },
         time: { type: 'text', placeholder: '请填写时间' },
         id: { type: 'text', placeholder: '请填写身份证号', errorMsg: '身份证格式有误' },
-        image: { type: 'text', placeholder: '请上传图片' },
+        image: { type: 'image', placeholder: '请上传图片' },
         phone: { type: 'tel', placeholder: '请填写手机号', errorMsg: '手机格式有误' }
       }
       const fieldsMap = {}
@@ -189,6 +195,9 @@ export default {
         if (this.validatorMap[item.type]) {
           field.validator = this.validatorMap[item.type]
         }
+        if (item.multiple) {
+          item.type = 'textarea'
+        }
         fieldsMap[field.key] = Object.assign({}, field, map[item.type])
       })
       this.fieldsMap = fieldsMap