bnyer
/
bnyer-cloud-hub
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

feat 针对于大于5mb的文件 进行提示 删除

feature-1.1
da da 3 years ago
parent
09864f0fd8
commit
81fe51da21
1 changed files with 533 additions and 522 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 699
      pages/index/upload/upload.vue

699
pages/index/upload/upload.vue
View File

@ -1,82 +1,84 @@
<template> <template>
<view class="page-content"> <view class="page-content">
<uni-section title="选择图片分类上传" type="circle"> <uni-section title="选择图片分类上传" type="circle">
</uni-section> </uni-section>
<view class="section-content"> <view class="section-content">
<view class="type-choice-comp"> <view class="type-choice-comp">
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" <view class="type-item uni-secondary-color" v-for="(val, i) in typeList" :index="i" :key="i"
:index="i" :key="i" :class="typeCurrent === i ? 'type-active' : ''"
:class="typeCurrent === i ? 'type-active' : ''" @click="$noMultipleClicks(onClickType,{currentIndex: i})">
@click="$noMultipleClicks(onClickType,{currentIndex: i})"> <view class="type-text">{{val}}</view>
<view class="type-text">{{val}}</view>
</view>
</view>
<uni-file-picker limit="9" title="最多选择9张图片"
:file-extname="fileExtname" mode="grid"
file-mediatype="image"
@success="successHandler"
@fail="failHandler"
@delete="deleteHandler"
:autoUpload="false"
@select="selectHandler"
:disabled="checkUpload">
</uni-file-picker>
<view class="uploadNum">今日还可上传次数<span class="uploadText"> {{ getUploadNum }} </span>，已上传次数<span class="uploadText"> {{ uploadedNum }} </span></view>
</view>
<uni-section title="是否原创" subTitle="非原创则视为网络图片" type="circle">
<view class="original-item-list">
<uni-data-checkbox multiple v-model="original" :localdata="originalList" :selectedColor="primaryColor" :selectedTextColor="primaryColor"></uni-data-checkbox>
</view>
</uni-section>
<view class="sign-box">
<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle" class="sign-item">
</uni-section>
<view class="sign-item-box">
<button plain="true" size="mini" type="default" class="sign-item-tag" @click="linkTo">自定义标签</button>
</view>
</view> </view>
</view>
<view class="section-content"> <uni-file-picker ref="filePicker" limit="9" title="最多选择9张图片" :file-extname="fileExtname" mode="grid"
<view class="segmented-control"> file-mediatype="image" @success="successHandler" @fail="failHandler" @delete="deleteHandler"
<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList" @change="selectedSign" max="3" class="check-box"></uni-data-checkbox> :autoUpload="false" @select="selectHandler" :disabled="checkUpload">
</view> </uni-file-picker>
</view> <view class="uploadNum">今日还可上传次数<span class="uploadText"> {{ getUploadNum }} </span>，已上传次数<span
class="uploadText"> {{ uploadedNum }} </span></view>
<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(commit)" :disabled="checkUpload" >点击上传</button> </view>
<uni-section title="是否原创" subTitle="非原创则视为网络图片" type="circle">
<view class="original-item-list">
<uni-data-checkbox multiple v-model="original" :localdata="originalList" :selectedColor="primaryColor"
:selectedTextColor="primaryColor"></uni-data-checkbox>
</view>
</uni-section>
<view class="sign-box">
<uni-section title="选择图片标签" subTitle="最多选择3个" type="circle" class="sign-item">
</uni-section>
<view class="sign-item-box">
<button plain="true" size="mini" type="default" class="sign-item-tag" @click="linkTo">自定义标签</button>
</view>
</view>
<view class="section-content">
<view class="segmented-control">
<uni-data-checkbox mode="tag" multiple v-model="signListSelected" :localdata="signList"
@change="selectedSign" max="3" class="check-box"></uni-data-checkbox>
</view>
</view>
<button class="upLoadBtn" size="default" :loading="loadingFlag" @click="$noMultipleClicks(commit)"
:disabled="checkUpload">点击上传</button>
</view> </view>
</template> </template>
<script> <script>
import { import {
getSignList,listType,insertTiktokImg,queryUploadNum getSignList,
listType,
insertTiktokImg,
queryUploadNum
} from '@/api/index.js' } from '@/api/index.js'
import { import {
deleteFile,uploadBatch deleteFile,
uploadBatch
} from '@/api/common.js' } from '@/api/common.js'
export default { export default {
data() { data() {
return { return {
styleType: 'button', styleType: 'button',
primaryColor: '#0b6375', primaryColor: '#0b6375',
typeCurrent: 0, typeCurrent: 0,
typeId: 1, typeId: 1,
fileExtname: "png,jpg,jpeg", fileExtname: "png,jpg,jpeg",
signList:[], signList: [],
signObject:{}, signObject: {},
typeList:[], typeList: [],
typeIdList:[], typeIdList: [],
loadingFlag: false, loadingFlag: false,
fileList: [], fileList: [],
imgList:[], imgList: [],
signListSelected:[], signListSelected: [],
userInfo:{}, userInfo: {},
uploadedNum: 0, uploadedNum: 0,
noClick:true, //防止重复提交 noClick: true, //防止重复提交
original: [], original: [],
originalList: [ originalList: [{
{text: "原创", value: 1} text: "原创",
] value: 1
}]
} }
}, },
created() { created() {
@ -101,13 +103,13 @@
this.getTypeList(); this.getTypeList();
this.queryUploadNum(); this.queryUploadNum();
}, },
computed:{ computed: {
//计算可上传次数 //计算可上传次数
getUploadNum(){ getUploadNum() {
return 50 - this.uploadedNum return 50 - this.uploadedNum
}, },
//动态设置上传组件禁用 //动态设置上传组件禁用
checkUpload(){ checkUpload() {
return this.uploadedNum >= 50; return this.uploadedNum >= 50;
} }
@ -115,20 +117,20 @@
methods: { methods: {
//跳转自定义标签页面 //跳转自定义标签页面
linkTo(){ linkTo() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/index/upload/customSign' url: '/pages/index/upload/customSign'
}); });
}, },
//获取标签列表 //获取标签列表
async getSignList(){ async getSignList() {
let that = this; let that = this;
const res = await getSignList({}) const res = await getSignList({})
if (res.data.code === 200) { if (res.data.code === 200) {
for (let s of res.data.data) { for (let s of res.data.data) {
let signObject = {} let signObject = {}
signObject.text = "#" +s.name signObject.text = "#" + s.name
signObject.value = s.id signObject.value = s.id
that.signList.push(signObject) that.signList.push(signObject)
} }
@ -142,17 +144,17 @@
}, },
//获取分类列表 //获取分类列表
async getTypeList(){ async getTypeList() {
let that = this; let that = this;
const res = await listType({}) const res = await listType({})
if(res.data.code === 200){ if (res.data.code === 200) {
for (let s of res.data.data) { for (let s of res.data.data) {
that.typeList.push(s.typeName); that.typeList.push(s.typeName);
that.typeIdList.push(s.id); that.typeIdList.push(s.id);
} }
//console.log('分类列表',that.typeList) //console.log('分类列表',that.typeList)
//console.log('分类id列表',that.typeIdList) //console.log('分类id列表',that.typeIdList)
}else{ } else {
uni.showModal({ uni.showModal({
content: '分类列表加载失败！', content: '分类列表加载失败！',
showCancel: false showCancel: false
@ -161,16 +163,16 @@
}, },
//获取艺术家今日上传图片次数 //获取艺术家今日上传图片次数
async queryUploadNum(){ async queryUploadNum() {
let that = this; let that = this;
const checkParam = { const checkParam = {
creatorId: that.userInfo.id creatorId: that.userInfo.id
} }
const res = await queryUploadNum(checkParam); const res = await queryUploadNum(checkParam);
// console.log(res) // console.log(res)
if(res.data.code === 200){ if (res.data.code === 200) {
that.uploadedNum = res.data.data; that.uploadedNum = res.data.data;
}else{ } else {
uni.showModal({ uni.showModal({
content: '获取艺术家上传次数失败！', content: '获取艺术家上传次数失败！',
showCancel: false showCancel: false
@ -178,42 +180,51 @@
} }
}, },
//选中分类事件 //选中分类事件
onClickType(e2){ onClickType(e2) {
let that = this; let that = this;
that.flag = false; that.flag = false;
that.typeCurrent = e2.currentIndex; that.typeCurrent = e2.currentIndex;
that.typeId = that.typeIdList[e2.currentIndex]; that.typeId = that.typeIdList[e2.currentIndex];
//console.log('typeId',that.typeId) //console.log('typeId',that.typeId)
uni.showLoading({ uni.showLoading({
title: "加载中", title: "加载中",
mask: true, mask: true,
complete() { complete() {
uni.hideLoading(); uni.hideLoading();
}, },
}); });
}, },
//选中标签事件 //选中标签事件
selectedSign(e){ selectedSign(e) {
let that = this; let that = this;
that.signListSelected = e.detail.value; that.signListSelected = e.detail.value;
//console.log('that.signListSelected'+that.signListSelected); //console.log('that.signListSelected'+that.signListSelected);
}, },
//文件上传成功监听事件 //文件上传成功监听事件
successHandler(e){ successHandler(e) {
// console.log('文件上传成功！'+e) // console.log('文件上传成功！'+e)
}, },
//選擇文件监听事件 //選擇文件监听事件
selectHandler(e){ selectHandler(e) {
console.log(e,1111) const maxSize = 5 * 1024 * 1024
if (!e.tempFiles) { if (!e.tempFiles) {
return; return;
} }
let current_file = e.tempFiles[0]
if(current_file.size > maxSize){
uni.showModal({
content: "当前文件大小超过5mb,请重新选择小雨5mb的文件进行上传！",
showCancel: false
});
const index = this.$refs.filePicker.files.indexOf(current_file);
this.$refs.filePicker.files.splice(index, 1);
return
}
let that = this; let that = this;
that.fileList = [...that.fileList, ...e.tempFilePaths]; that.fileList = [...that.fileList, ...e.tempFilePaths];
console.log(that.fileList,333)
//检查是否可上传文件 //检查是否可上传文件
if(that.uploadedNum >= 50){ if (that.uploadedNum >= 50) {
uni.showModal({ uni.showModal({
content: "当日已达上传图片上限,请明日再来！", content: "当日已达上传图片上限,请明日再来！",
showCancel: false showCancel: false
@ -223,80 +234,82 @@
// that.uploadHandler(e.tempFilePaths) // that.uploadHandler(e.tempFilePaths)
}, },
//文件上传失败监听事件 //文件上传失败监听事件
failHandler(e){ failHandler(e) {
// console.log('文件上传失败！'+e) // console.log('文件上传失败！'+e)
}, },
//文件删除监听事件 //文件删除监听事件
deleteHandler(e){ deleteHandler(e) {
// console.log('文件删除',e.tempFile.url) // console.log('文件删除',e.tempFile.url)
//调用文件删除方法 //调用文件删除方法
let that = this; let that = this;
that.fileList = that.fileList?.filter?.(item => { that.fileList = that.fileList?.filter?.(item => {
item !== e.tempFile; item !== e.tempFile;
}) })
}, },
commit() { commit() {
let that = this; let that = this;
if (that.fileList.length === 0) { if (that.fileList.length === 0) {
uni.showModal({ uni.showModal({
content: "请选择图片上传！", content: "请选择图片上传！",
showCancel: false, showCancel: false,
}); });
return; return;
} }
that.uploadHandler(that.fileList); that.uploadHandler(that.fileList);
},
//上传文件监听事件
uploadHandler: async function(e){
let that = this;
uni.showLoading({
title: "上传中"
});
const tempFilePaths = e;
console.log(tempFilePaths,111)
for (var i = 0; i < tempFilePaths.length; i++) {
//const tempFile = e.tempFiles[i];
const [error, res] = await uni.uploadFile({
url: `${that.$baseURL}${that.$uploadURL}`,
filePath: tempFilePaths[i],
name: `files`,
formData: {
fileType:that.typeCurrent + 1
}, },
header:{ //上传文件监听事件
"Content-Type": "multipart/form-data", uploadHandler: async function(e) {
}, let that = this;
// success:(uploadFileRes) => { uni.showLoading({
// // uni.hideLoading(); title: "上传中"
// const back = JSON.parse(uploadFileRes.data); });
// if (back.code == 200) { const tempFilePaths = e;
// that.imgList.push(back.data); for (var i = 0; i < tempFilePaths.length; i++) {
// } //const tempFile = e.tempFiles[i];
// }, const [error, res] = await uni.uploadFile({
// fail:() => { url: `${that.$baseURL}${that.$uploadURL}`,
// uni.hideLoading(); filePath: tempFilePaths[i],
// uni.showModal({ name: `files`,
// content: "上传失败，请联系客服！" formData: {
// }); fileType: that.typeCurrent + 1
// }, },
// complete: function() { header: {
// uni.hideLoading(); "Content-Type": "multipart/form-data",
// } },
}); // success:(uploadFileRes) => {
const {data,code} = JSON.parse(res.data); // // uni.hideLoading();
if (code == 200) { // const back = JSON.parse(uploadFileRes.data);
that.imgList.push(data[0]) // if (back.code == 200) {
} // that.imgList.push(back.data);
} // }
// },
this.saveImg() // fail:() => {
// uni.hideLoading();
// uni.showModal({
// content: "上传失败，请联系客服！"
// });
// },
// complete: function() {
// uni.hideLoading();
// }
});
const {
data,
code
} = JSON.parse(res.data);
if (code == 200) {
that.imgList.push(data[0])
}
}
this.saveImg()
}, },
//提交表单 //提交表单
saveImg(){ saveImg() {
let that = this; let that = this;
//判断是否有上传图片 //判断是否有上传图片
if(that.imgList.length === 0){ if (that.imgList.length === 0) {
uni.showModal({ uni.showModal({
content: "请选择图片上传！", content: "请选择图片上传！",
showCancel: false, showCancel: false,
@ -304,224 +317,222 @@
return; return;
} }
//检查是否可上传文件 //检查是否可上传文件
if(that.uploadedNum >= 50){ if (that.uploadedNum >= 50) {
uni.showModal({ uni.showModal({
content: "当日已达上传图片上限,请明日再来！", content: "当日已达上传图片上限,请明日再来！",
showCancel: false showCancel: false
}); });
}else{ } else {
const param = { const param = {
creatorId: that.userInfo.id, creatorId: that.userInfo.id,
imgUrl: that.imgList, imgUrl: that.imgList,
signList: that.signListSelected, signList: that.signListSelected,
status: 0, status: 0,
typeId: that.typeId, typeId: that.typeId,
isOriginal: that.original?.length > 0 ? 1 : 0 isOriginal: that.original?.length > 0 ? 1 : 0
} }
insertTiktokImg(param).then(res =>{ insertTiktokImg(param).then(res => {
// console.log('res',res) // console.log('res',res)
if(res.data.code === 200){ if (res.data.code === 200) {
uni.hideLoading(); uni.hideLoading();
uni.showToast({ uni.showToast({
title: '上传成功!', title: '上传成功!',
duration: 2000, duration: 2000,
success:function(){ success: function() {
setTimeout(function () { setTimeout(function() {
//返回主页，清空上传列表 //返回主页，清空上传列表
that.imgList = [] that.imgList = []
that.signListSelected = [] that.signListSelected = []
that.typeId = 1 that.typeId = 1
uni.reLaunch({ uni.reLaunch({
url: '../index' url: '../index'
}); });
}, 2000); }, 2000);
} }
}); });
}else { } else {
uni.hideLoading(); uni.hideLoading();
uni.showModal({ uni.showModal({
content: "艺术家图片上传失败！", content: "艺术家图片上传失败！",
showCancel: false, showCancel: false,
}); });
} }
}); });
} }
} }
}, },
watch: { watch: {
typeId(newValue) { typeId(newValue) {
if (newValue === 2) { //gif if (newValue === 2) { //gif
this.fileExtname = "gif"; this.fileExtname = "gif";
} else { } else {
this.fileExtname = "png,jpg,jpeg"; this.fileExtname = "png,jpg,jpeg";
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-content { .page-content {
min-height: 100vh; min-height: 100vh;
background: $uni-bg-color; background: $uni-bg-color;
width: 750rpx; width: 750rpx;
::v-deep .uni-section { ::v-deep .uni-section {
background: none !important; background: none !important;
margin-top: 0 !important; margin-top: 0 !important;
color: $uni-white; color: $uni-white;
}
::v-deep .uni-section__content-title {
color: $uni-white !important;
font-size: 28rpx !important;
}
.original-item-list {
width: 654rpx;
margin: 0 auto;
::v-deep .checklist-text {
color: $uni-secondary-color !important;
font-size: 24rpx !important;
}
::v-deep .is-checked .checklist-text {
color: $uni-primary !important;
font-size: 24rpx !important;
}
}
.sign-box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width:750rpx;
.sign-item{
z-index: 0;
width: 300rpx;
} }
.sign-item-box{ ::v-deep .uni-section__content-title {
margin-right: 50rpx; color: $uni-white !important;
margin-top: 15rpx; font-size: 28rpx !important;
z-index: 0; }
.original-item-list {
width: 654rpx;
margin: 0 auto;
::v-deep .checklist-text {
color: $uni-secondary-color !important;
font-size: 24rpx !important;
}
::v-deep .is-checked .checklist-text {
color: $uni-primary !important;
font-size: 24rpx !important;
}
}
.sign-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 750rpx;
.sign-item-tag{ .sign-item {
color: #fff; z-index: 0;
width: 300rpx;
} }
.custom-sign{ .sign-item-box {
margin-right: 50rpx;
margin-top: 15rpx;
z-index: 0; z-index: 0;
.sign-item-tag {
color: #fff;
}
.custom-sign {
z-index: 0;
}
} }
} }
}
.section-content { .section-content {
width: 654rpx; width: 654rpx;
margin: 0 auto; margin: 0 auto;
} }
.type-choice-comp { .type-choice-comp {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: scroll; overflow: scroll;
padding-top: 20rpx; padding-top: 20rpx;
padding-bottom: 20rpx; padding-bottom: 20rpx;
.type-item { .type-item {
font-size: 24rpx; font-size: 24rpx;
line-height: 40rpx; line-height: 40rpx;
height: 40rpx; height: 40rpx;
padding: 0 20rpx; padding: 0 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
flex-shrink: 0; flex-shrink: 0;
.type-text { .type-text {}
}
}
.type-active {
background: $uni-primary;
color: $uni-white !important;
}
}
::v-deep .file-title {
color: $uni-white !important;
font-size: 24rpx !important;
}
::v-deep .file-count {
color: $uni-white !important;
font-size: 24rpx !important;
}
::v-deep .file-picker__box-content {
border-color: $uni-secondary-color !important;
}
::v-deep .icon-add {
background-color: $uni-secondary-color !important;
}
.uploadNum{
color: $uni-white;
font-size: 24rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
.uploadText{
color: $uni-primary;
font-weight: 600;
}
}
.segmented-control {
::v-deep .checklist-box {
border: none !important;
background: none !important;
margin-right: 0 !important;
}
::v-deep .checklist-text {
color: $uni-secondary-color !important;
font-size: 24rpx !important;
}
::v-deep .is-checked .checklist-text {
color: $uni-primary !important;
font-size: 24rpx !important;
}
::v-deep .is-disable .checklist-text {
color: $uni-base-color !important;
font-size: 24rpx !important;
}
}
.upLoadBtn{
width: 654rpx;
height: 100rpx;
line-height: 100rpx;
background: linear-gradient(180.00deg, $uni-white 0%, $uni-white 100%);
margin: 60rpx auto;
color: $uni-btn-text-color;
border-radius: 20rpx;
font-size: 28rpx;
z-index: 0;
}
}
}
.type-active {
background: $uni-primary;
color: $uni-white !important;
}
}
::v-deep .file-title {
color: $uni-white !important;
font-size: 24rpx !important;
}
::v-deep .file-count {
color: $uni-white !important;
font-size: 24rpx !important;
}
::v-deep .file-picker__box-content {
border-color: $uni-secondary-color !important;
}
::v-deep .icon-add {
background-color: $uni-secondary-color !important;
}
.uploadNum {
color: $uni-white;
font-size: 24rpx;
margin-top: 20rpx;
margin-bottom: 20rpx;
.uploadText {
color: $uni-primary;
font-weight: 600;
}
}
.segmented-control {
::v-deep .checklist-box {
border: none !important;
background: none !important;
margin-right: 0 !important;
}
::v-deep .checklist-text {
color: $uni-secondary-color !important;
font-size: 24rpx !important;
}
::v-deep .is-checked .checklist-text {
color: $uni-primary !important;
font-size: 24rpx !important;
}
::v-deep .is-disable .checklist-text {
color: $uni-base-color !important;
font-size: 24rpx !important;
}
}
.upLoadBtn {
width: 654rpx;
height: 100rpx;
line-height: 100rpx;
background: linear-gradient(180.00deg, $uni-white 0%, $uni-white 100%);
margin: 60rpx auto;
color: $uni-btn-text-color;
border-radius: 20rpx;
font-size: 28rpx;
z-index: 0;
}
}
</style> </style>

Write Preview
Loading…
Cancel
Save