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
Split 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>
<view class="page-content">
<uni-section title="选择图片分类上传" type="circle">
</uni-section>
<view class="section-content">
<view class="type-choice-comp">
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList"
:index="i" :key="i"
:class="typeCurrent === i ? 'type-active' : ''"
@click="$noMultipleClicks(onClickType,{currentIndex: i})">
<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>
<uni-section title="选择图片分类上传" type="circle">
</uni-section>
<view class="section-content">
<view class="type-choice-comp">
<view class="type-item uni-secondary-color" v-for="(val, i) in typeList" :index="i" :key="i"
:class="typeCurrent === i ? 'type-active' : ''"
@click="$noMultipleClicks(onClickType,{currentIndex: i})">
<view class="type-text">{{val}}</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>
<uni-file-picker ref="filePicker" 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 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>
</template>
<script>
import {
getSignList,listType,insertTiktokImg,queryUploadNum
getSignList,
listType,
insertTiktokImg,
queryUploadNum
} from '@/api/index.js'
import {
deleteFile,uploadBatch
deleteFile,
uploadBatch
} from '@/api/common.js'
export default {
data() {
return {
styleType: 'button',
primaryColor: '#0b6375',
primaryColor: '#0b6375',
typeCurrent: 0,
typeId: 1,
fileExtname: "png,jpg,jpeg",
signList:[],
signObject:{},
typeList:[],
typeIdList:[],
fileExtname: "png,jpg,jpeg",
signList: [],
signObject: {},
typeList: [],
typeIdList: [],
loadingFlag: false,
fileList: [],
imgList:[],
signListSelected:[],
userInfo:{},
fileList: [],
imgList: [],
signListSelected: [],
userInfo: {},
uploadedNum: 0,
noClick:true, //防止重复提交
original: [],
originalList: [
{text: "原创", value: 1}
]
noClick: true, //防止重复提交
original: [],
originalList: [{
text: "原创",
value: 1
}]
}
},
created() {
@ -101,13 +103,13 @@
this.getTypeList();
this.queryUploadNum();
},
computed:{
computed: {
//计算可上传次数
getUploadNum(){
getUploadNum() {
return 50 - this.uploadedNum
},
//动态设置上传组件禁用
checkUpload(){
checkUpload() {
return this.uploadedNum >= 50;
}
@ -115,20 +117,20 @@
methods: {
//跳转自定义标签页面
linkTo(){
linkTo() {
uni.navigateTo({
url: '/pages/index/upload/customSign'
});
},
//获取标签列表
async getSignList(){
async getSignList() {
let that = this;
const res = await getSignList({})
if (res.data.code === 200) {
for (let s of res.data.data) {
let signObject = {}
signObject.text = "#" +s.name
signObject.text = "#" + s.name
signObject.value = s.id
that.signList.push(signObject)
}
@ -142,17 +144,17 @@
},
//获取分类列表
async getTypeList(){
async getTypeList() {
let that = this;
const res = await listType({})
if(res.data.code === 200){
if (res.data.code === 200) {
for (let s of res.data.data) {
that.typeList.push(s.typeName);
that.typeIdList.push(s.id);
}
//console.log('分类列表',that.typeList)
//console.log('分类id列表',that.typeIdList)
}else{
} else {
uni.showModal({
content: '分类列表加载失败！',
showCancel: false
@ -161,16 +163,16 @@
},
//获取艺术家今日上传图片次数
async queryUploadNum(){
async queryUploadNum() {
let that = this;
const checkParam = {
creatorId: that.userInfo.id
}
const res = await queryUploadNum(checkParam);
// console.log(res)
if(res.data.code === 200){
if (res.data.code === 200) {
that.uploadedNum = res.data.data;
}else{
} else {
uni.showModal({
content: '获取艺术家上传次数失败！',
showCancel: false
@ -178,42 +180,51 @@
}
},
//选中分类事件
onClickType(e2){
onClickType(e2) {
let that = this;
that.flag = false;
that.typeCurrent = e2.currentIndex;
that.typeId = that.typeIdList[e2.currentIndex];
//console.log('typeId',that.typeId)
uni.showLoading({
title: "加载中",
mask: true,
complete() {
uni.hideLoading();
},
title: "加载中",
mask: true,
complete() {
uni.hideLoading();
},
});
},
//选中标签事件
selectedSign(e){
selectedSign(e) {
let that = this;
that.signListSelected = e.detail.value;
//console.log('that.signListSelected'+that.signListSelected);
},
//文件上传成功监听事件
successHandler(e){
successHandler(e) {
// console.log('文件上传成功！'+e)
},
//選擇文件监听事件
selectHandler(e){
console.log(e,1111)
if (!e.tempFiles) {
return;
}
selectHandler(e) {
const maxSize = 5 * 1024 * 1024
if (!e.tempFiles) {
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;
that.fileList = [...that.fileList, ...e.tempFilePaths];
console.log(that.fileList,333)
that.fileList = [...that.fileList, ...e.tempFilePaths];
//检查是否可上传文件
if(that.uploadedNum >= 50){
if (that.uploadedNum >= 50) {
uni.showModal({
content: "当日已达上传图片上限,请明日再来！",
showCancel: false
@ -223,80 +234,82 @@
// that.uploadHandler(e.tempFilePaths)
},
//文件上传失败监听事件
failHandler(e){
failHandler(e) {
// console.log('文件上传失败！'+e)
},
//文件删除监听事件
deleteHandler(e){
deleteHandler(e) {
// console.log('文件删除',e.tempFile.url)
//调用文件删除方法
let that = this;
that.fileList = that.fileList?.filter?.(item => {
item !== e.tempFile;
})
let that = this;
that.fileList = that.fileList?.filter?.(item => {
item !== e.tempFile;
})
},
commit() {
let that = this;
if (that.fileList.length === 0) {
uni.showModal({
content: "请选择图片上传！",
showCancel: false,
});
return;
}
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
commit() {
let that = this;
if (that.fileList.length === 0) {
uni.showModal({
content: "请选择图片上传！",
showCancel: false,
});
return;
}
that.uploadHandler(that.fileList);
},
header:{
"Content-Type": "multipart/form-data",
},
// success:(uploadFileRes) => {
// // uni.hideLoading();
// const back = JSON.parse(uploadFileRes.data);
// if (back.code == 200) {
// that.imgList.push(back.data);
// }
// },
// 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()
//上传文件监听事件
uploadHandler: async function(e) {
let that = this;
uni.showLoading({
title: "上传中"
});
const tempFilePaths = e;
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",
},
// success:(uploadFileRes) => {
// // uni.hideLoading();
// const back = JSON.parse(uploadFileRes.data);
// if (back.code == 200) {
// that.imgList.push(back.data);
// }
// },
// 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;
//判断是否有上传图片
if(that.imgList.length === 0){
if (that.imgList.length === 0) {
uni.showModal({
content: "请选择图片上传！",
showCancel: false,
@ -304,224 +317,222 @@
return;
}
//检查是否可上传文件
if(that.uploadedNum >= 50){
if (that.uploadedNum >= 50) {
uni.showModal({
content: "当日已达上传图片上限,请明日再来！",
showCancel: false
});
}else{
} else {
const param = {
creatorId: that.userInfo.id,
imgUrl: that.imgList,
signList: that.signListSelected,
status: 0,
typeId: that.typeId,
isOriginal: that.original?.length > 0 ? 1 : 0
}
insertTiktokImg(param).then(res =>{
// console.log('res',res)
if(res.data.code === 200){
uni.hideLoading();
uni.showToast({
title: '上传成功!',
duration: 2000,
success:function(){
setTimeout(function () {
//返回主页，清空上传列表
that.imgList = []
that.signListSelected = []
that.typeId = 1
uni.reLaunch({
url: '../index'
});
}, 2000);
}
});
}else {
uni.hideLoading();
uni.showModal({
creatorId: that.userInfo.id,
imgUrl: that.imgList,
signList: that.signListSelected,
status: 0,
typeId: that.typeId,
isOriginal: that.original?.length > 0 ? 1 : 0
}
insertTiktokImg(param).then(res => {
// console.log('res',res)
if (res.data.code === 200) {
uni.hideLoading();
uni.showToast({
title: '上传成功!',
duration: 2000,
success: function() {
setTimeout(function() {
//返回主页，清空上传列表
that.imgList = []
that.signListSelected = []
that.typeId = 1
uni.reLaunch({
url: '../index'
});
}, 2000);
}
});
} else {
uni.hideLoading();
uni.showModal({
content: "艺术家图片上传失败！",
showCancel: false,
});
}
});
});
}
});
}
}
},
watch: {
typeId(newValue) {
if (newValue === 2) { //gif
this.fileExtname = "gif";
} else {
this.fileExtname = "png,jpg,jpeg";
}
}
}
typeId(newValue) {
if (newValue === 2) { //gif
this.fileExtname = "gif";
} else {
this.fileExtname = "png,jpg,jpeg";
}
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
min-height: 100vh;
background: $uni-bg-color;
width: 750rpx;
::v-deep .uni-section {
background: none !important;
margin-top: 0 !important;
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;
.page-content {
min-height: 100vh;
background: $uni-bg-color;
width: 750rpx;
::v-deep .uni-section {
background: none !important;
margin-top: 0 !important;
color: $uni-white;
}
.sign-item-box{
margin-right: 50rpx;
margin-top: 15rpx;
z-index: 0;
::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-tag{
color: #fff;
.sign-item {
z-index: 0;
width: 300rpx;
}
.custom-sign{
.sign-item-box {
margin-right: 50rpx;
margin-top: 15rpx;
z-index: 0;
.sign-item-tag {
color: #fff;
}
.custom-sign {
z-index: 0;
}
}
}
}
.section-content {
width: 654rpx;
margin: 0 auto;
}
.type-choice-comp {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow: scroll;
padding-top: 20rpx;
padding-bottom: 20rpx;
.type-item {
font-size: 24rpx;
line-height: 40rpx;
height: 40rpx;
padding: 0 20rpx;
border-radius: 20rpx;
flex-shrink: 0;
.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;
}
}
.section-content {
width: 654rpx;
margin: 0 auto;
}
.type-choice-comp {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow: scroll;
padding-top: 20rpx;
padding-bottom: 20rpx;
.type-item {
font-size: 24rpx;
line-height: 40rpx;
height: 40rpx;
padding: 0 20rpx;
border-radius: 20rpx;
flex-shrink: 0;
.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;
}
}
</style>

Write Preview
Loading…
Cancel
Save