✨ feat: 调整相关控件，图片上传组件新增七牛生成URL

hookehuyr
Commit 57cde0abbee24768aa9667773b3d5423e1dd9e28 57cde0ab 1 parent 0c5b3a9c
Showing 4 changed files with 66 additions and 45 deletions
src/components/DatePickerField/index.vue
src/components/ImageUploaderField/index.vue
src/hooks/useComponentType.js
src/views/index.vue
--- a/src/components/DatePickerField/index.vue
View file @57cde0a
+++ b/src/components/DatePickerField/index.vue
View file @57cde0a
 <!--
  * @Date: 2022-08-31 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-31 13:33:45
+ * @LastEditTime: 2022-09-07 13:52:57
  * @FilePath: /data-table/src/components/DatePickerField/index.vue
  * @Description: 日期选择组件
 -->
@@ -32,7 +32,10 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
   props.item.value = selectedValues[0] + '-' + selectedValues[1];
   showPicker.value = false;
 };
-// console.warn(dayjs().format('YYYY'));
+
+onMounted(() => {
+  currentDate.value = props.item.value.split('-')
+})
 </script>
 <style lang="less" scoped>
--- a/src/components/ImageUploaderField/index.vue
View file @57cde0a
+++ b/src/components/ImageUploaderField/index.vue
View file @57cde0a
 <!--
  * @Date: 2022-08-31 16:16:49
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-06 14:49:08
+ * @LastEditTime: 2022-09-07 13:56:29
  * @FilePath: /data-table/src/components/ImageUploaderField/index.vue
  * @Description: 文件描述
 -->
@@ -25,6 +25,8 @@
 */
 import { Toast } from 'vant';
 import _ from 'lodash'
+import { v4 as uuidv4 } from 'uuid';
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
 const props = defineProps({
   item: Object
@@ -53,9 +55,27 @@ const beforeRead = (file) => {
   return flag;
 };
-const afterRead = (file) => {
+const afterRead = async (file) => {
   // 此时可以自行将文件上传至服务器
-  console.log(file);
+  let affix = uuidv4();
+  let base64url = file.content.slice(file.content.indexOf(',') + 1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
+  // 获取七牛token
+  const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_image_upload`, file: base64url });
+  if (code) {
+    const config = {
+      headers: {
+        'Content-Type': 'application/octet-stream',
+        'Authorization': 'UpToken ' + token,    // UpToken后必须有一个 ' '(空格)
+      }
+    }
+    // 上传七牛服务器
+    const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config)
+    if (filekey) {
+      // 保存图片
+      const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
+      console.warn(data.src);
+    }
+  }
 };
 const fileList = ref([
--- a/src/hooks/useComponentType.js
View file @57cde0a
+++ b/src/hooks/useComponentType.js
View file @57cde0a
@@ -17,10 +17,10 @@ import SignField from '@/components/SignField/index.vue'
  * @param {*} data
  * @type text 单行文本 TextField
  * @type textarea 多行文本 TextareaField
- * @type radio 单选框 RadioField
+ * @type radio 单项选择 RadioField
- * @type checkbox 多选框 CheckboxField
+ * @type checkbox 多项选择 CheckboxField
  * @type picker 单列选择器 PickerField
- * @type area_picker 省市区选择器 AreaPickerField
+ * @type area_picker 地址选择器 AreaPickerField
  * @type date_picker 日期选择器 DatePickerField
  * @type image_uploader 图片上传 ImageUploaderField
  * @type phone 手机输入框 PhoneField
--- a/src/views/index.vue
View file @57cde0a
+++ b/src/views/index.vue
View file @57cde0a
 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-06 18:25:18
+ * @LastEditTime: 2022-09-07 14:12:37
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -44,17 +44,17 @@ onMounted(() => {
   //   },
   //   required: true,
   // },
-  {
+  // {
-    key: 'username',
+  //   key: 'username',
-    value: 'test',
+  //   value: 'test',
-    label: '用户名',
+  //   label: '用户名',
-    placeholder: '请输入用户名',
+  //   placeholder: '请输入用户名',
-    component: '',
+  //   component: '',
-    component_props: {
+  //   component_props: {
-      name: 'text'
+  //     name: 'text'
-    },
+  //   },
-    required: true,
+  //   required: true,
-  },
+  // },
   // {
   //   key: 'email',
   //   value: '',
@@ -98,7 +98,6 @@ onMounted(() => {
   //   key: 'hobby',
   //   value: [],
   //   label: '兴趣爱好',
-  //   placeholder: '',
   //   component: '',
   //   component_props: {
   //     name: 'checkbox'
@@ -113,7 +112,7 @@ onMounted(() => {
   // },
   // {
   //   key: 'message',
-  //   value: 'zzz',
+  //   value: '一种可以用来记录，展示文字信息的载体，有比较强的时效性。一般以黑板、木板为载体。用来留言。各种各样的留言使用。留言板还有引申的“网络留言板”。这个和网络留言本不一样的地方是留言板一般比较集中的反应信息的。',
   //   label: '留言',
   //   placeholder: '请输入留言',
   //   component: '',
@@ -147,20 +146,20 @@ onMounted(() => {
       name: 'sign'
     },
   },
-  {
+  // {
-    key: 'city',
+  //   key: 'city',
-    value: '天津市/天津市/和平区',
+  //   value: '天津市/天津市/和平区',
-    city_code: '120101',
+  //   city_code: '120101',
-    label: '地址',
+  //   label: '地址',
-    address: '',
+  //   address: '',
-    placeholder: '请选择省市区',
+  //   placeholder: '请选择省市区',
-    component_props: {
+  //   component_props: {
-      name: 'area_picker'
+  //     name: 'area_picker'
-    },
+  //   },
-  },
+  // },
   // {
   //   key: 'datetime',
-  //   value: [],
+  //   value: '2022-10',
   //   label: '日期选择',
   //   placeholder: '请选择日期',
   //   component_props: {
@@ -170,16 +169,16 @@ onMounted(() => {
   //     columns_type: ['year', 'month']
   //   },
   // },
-  {
+  // {
-    key: 'imageUploader',
+  //   key: 'image_src',
-    value: '',
+  //   value: '',
-    label: '图片上传',
+  //   label: '图片上传',
-    component_props: {
+  //   component_props: {
-      name: 'image_uploader',
+  //     name: 'image_uploader',
-      image_type: ['jpg', 'png'],
+  //     image_type: ['jpg', 'png'],
-      multiple: false
+  //     multiple: false
-    }
+  //   }
-  }
+  // }
   ];
   // 生成自定义组件
   createComponentType(mockData.value)
@@ -189,7 +188,6 @@ const onSubmit = (values) => {
   console.log('submit', values);
   // console.warn(mockData.value);
 };
-
 </script>
 <style lang="less" scoped>