Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9580bc4d 1 parent c1b95a6b

联调文件上传和图片上传控件

Inline Side-by-side
Showing 2 changed files with 34 additions and 13 deletions
<!--
* @Date: 2022-08-31 16:16:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 14:54:30
* @FilePath: /data-table/src/components/ImageUploaderField/index.vue
* @LastEditTime: 2022-12-30 10:32:42
* @FilePath: /data-table/src/components/FileUploaderField/index.vue
* @Description: 文件上传控件
-->
<template>
......@@ -13,7 +13,7 @@
</div>
<div
v-if="item.component_props.note"
style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem"
style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem;"
>
{{ item.component_props.note }}
</div>
......@@ -38,6 +38,7 @@
:before-read="beforeRead"
:after-read="afterRead"
:before-delete="beforeDelete"
:multiple="item.component_props.max_size > 1"
>
<van-button icon="plus" type="primary">上传文件</van-button>
</van-uploader>
......@@ -104,16 +105,21 @@ const beforeRead = (file) => {
// (item) => `video/${item}`
// );
let flag = true;
if (file.length + 1 > props.item.component_props.max_count) {
// 数量限制
flag = false;
showToast(`最大上传数量为${props.item.component_props.max_count}个`);
}
if (fileList.value.length + 1 > props.item.component_props.max_count) {
// 数量限制
flag = false;
showToast(`最大上传数量为${props.item.component_props.max_count}个`);
}
if (file.size > props.item.component_props.max_size) {
if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
// 体积限制
flag = false;
showToast(
`最大文件体积为${(props.item.component_props.max_size / 1024 / 1024).toFixed(2)}MB`
`最大文件体积为${props.item.component_props.max_size}MB`
);
}
// if (_.isArray(file)) {
......@@ -258,8 +264,9 @@ var muliUpload = async (files) => {
// 生成数据库真实文件地址
const uploadQiniu = async (file, token, name, md5) => {
let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
// let affix = uuidv4();
let fileName = `uploadForm/${formCode}/${md5}.${name.split(".")[1]}`;
let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
let formData = new FormData();
formData.append("file", file); // 通过append向form对象添加数据
formData.append("token", token);
......
<!--
* @Date: 2022-08-31 16:16:49
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 14:54:30
* @LastEditTime: 2022-12-30 10:31:02
* @FilePath: /data-table/src/components/ImageUploaderField/index.vue
* @Description: 图片上传控件
-->
......@@ -11,6 +11,12 @@
{{ item.component_props.label
}}<span v-if="item.component_props.required">&nbsp;*</span>
</div>
<div
v-if="item.component_props.note"
style="font-size: 0.9rem; margin-left: 1rem; color: gray; padding-bottom: 0.5rem; padding-top: 0.25rem;"
>
{{ item.component_props.note }}
</div>
<div style="padding: 1rem">
<van-uploader
:name="item.name"
......@@ -19,7 +25,7 @@
:after-read="afterRead"
:before-delete="beforeDelete"
v-model="fileList"
:multiple="item.component_props.multiple"
:multiple="item.component_props.max_size > 1"
/>
</div>
<div class="type-text">上传类型:&nbsp;{{ type_text }}</div>
......@@ -111,13 +117,11 @@ const beforeRead = (file) => {
flag = false;
showToast(`最大上传数量为${props.item.component_props.max_count}张`);
}
if (file.size > props.item.component_props.max_size) {
if ((file.size / 1024 / 1024).toFixed(2) > props.item.component_props.max_size) {
// 体积限制
flag = false;
showToast(
`最大文件体积为${(props.item.component_props.max_size / 1024 / 1024).toFixed(
2
)}MB`
`最大文件体积为${props.item.component_props.max_size}MB`
);
}
}
......@@ -259,10 +263,20 @@ var muliUpload = async (files) => {
}
};
const getType = (file, name) => {
var index1 = name.lastIndexOf(".");
var index2 = file.length;
var type = file.substring(index1, index2).toUpperCase();
return type;
}
// 生成数据库真实图片地址
const uploadQiniu = async (file, token, name, md5) => {
let suffix = /\.[^\.]+$/.exec(name); // 获取后缀
// let affix = uuidv4();
let fileName = `uploadForm/${formCode}/${md5}.${name.split(".")[1]}`;
let fileName = `uploadForm/${formCode}/${md5}${suffix}`;
let formData = new FormData();
formData.append("file", file); // 通过append向form对象添加数据
formData.append("token", token);
......