Skip to content

W
web-purchase
Commit 9d1eab8d authored by 张冬's avatar 张冬
Browse files
Options

上传跳动问题

parent 36210671
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 165 deletions
src/components/Upload/Upload.vue
View file @ 9d1eab8d
<template> <template>
<div class="hello"> <div class="hello">
<div v-loading="loading"></div> <el-upload
<el-upload :on-remove="handleRemove"
v-loading.fullscreen.lock="loading" :on-success="handleSuccess"
:http-request="handleUpload" :before-remove="beforeRemove"
:on-preview="handlePreview" :limit="limit"
:on-remove="handleRemove" :on-exceed="handleExceed"
:on-success="handleSuccess" :file-list="fileList"
:before-remove="beforeRemove" :list-type="listType"
:limit="limit" :accept="accept"
:on-exceed="handleExceed" :before-upload="beforeUpload"
:file-list="fileList" class="upload-demo"
:list-type="listType" action="Fake Action"
:accept="accept" :http-request="handleUpload"
class="upload-demo" multiple
action >
multiple> <el-button size="small" type="primary">点击上传</el-button>
<el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">
<div slot="tip" class="el-upload__tip">{{ tip }}</div> {{ tip }}
</el-upload> </div>
</div> </el-upload>
</div>
</template> </template>
<script> <script>
import { import { put, getFileNameUUID } from '@api/ali-oss';
put,
getFileNameUUID
} from '@api/ali-oss'
export default { export default {
name: 'Upload', name: 'Upload',
props: { props: {
accept: { accept: {
type: String, type: String,
default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx' default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx'
},
tip: {
type: String,
default: '上传大小不能超过80M'
},
limit: {
type: Number,
default: 3
},
action: {
type: String,
default: ''
},
headers: {
type: Object,
default: () => {}
},
fileList: {
type: Array,
default: () => []
},
name: {
type: String,
default: ''
},
listType: {
type: String,
default: 'text'
},
max: {
type: Number,
default: 99
}
}, },
tip: { data() {
type: String, return {
default: '上传大小不能超过80M' loading: false
};
}, },
limit: { created() {
type: Number, console.log(this.fileList);
default: 3
}, },
action: { methods: {
type: String, emitInput(fileList) {
default: '' let value = [];
}, for (let i = 0; i < fileList.length; i++) {
headers: { let message = {};
type: Object, message.name = fileList[i].name;
default: () => {} message.url = fileList[i].url;
}, message.fileName = fileList[i].name;
fileList:{ message.fileUrl = fileList[i].url;
type: Array, message.uid = fileList[i].uid;
default: () => [] value.push(message);
}, }
name: { console.log(value)
type: String, this.$emit('input', value);
default: '' },
}, beforeUpload(file) {
listType: { // 生成的文件名称
type: String, this.loading=false
default: 'text' let objName = getFileNameUUID();
}, // 调用 ali-oss 中的方法
max: { put(`${objName}${file.name}`, file).then((res) => {
type: Number, console.log(res);
default: 99 this.fileList.push(res);
} this.loading=true
}, this.emitInput(this.fileList);
data() {
return { });
loading:false },
} handleRemove(file, fileList, index) {
}, this.$emit('on-remove', file, fileList);
created(){ this.fileList = fileList;
console.log(this.fileList) this.emitInput(fileList);
}, },
methods: { // handlePreview(file) {
emitInput(fileList) { // this.$emit('on-preview', file);
this.loading=false // },
let value = [] handleExceed(files, fileList) {
for (let i = 0; i < fileList.length; i++) { this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
let message = {} },
message.name = fileList[i].name beforeRemove(file, fileList) {
message.url = fileList[i].url return this.$confirm(`确定移除 ${file.name}？`);
message.fileName = fileList[i].name },
message.fileUrl = fileList[i].url handleSuccess(response, file, fileList) {
message.uid=fileList[i].uid console.log('成功');
value.push(message) },
} /**
this.$emit('input', value) * 自定义上传方法
}, */
beforeUpload(file) { handleUpload(option) {}
this.loading=true
const max = this.max
const isLt2M = file.size / 1024 / 1024 < max
if (!isLt2M) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`)
}
return isLt2M
},
handleRemove(file, fileList, index) {
this.$emit('on-remove', file, fileList)
this.fileList = fileList
this.emitInput(fileList)
},
handlePreview(file) {
this.$emit('on-preview', file)
},
handleExceed(files, fileList) {
this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
handleSuccess(response, file, fileList) {
console.log('成功')
this.fileList = fileList
this.$emit('on-success', file, fileList)
},
/**
* 自定义上传方法
*/
handleUpload(option) {
const max = this.max
const isLt2M = option.file.size / 1024 / 1024 < max
if (isLt2M) {
// 生成的文件名称
let objName = getFileNameUUID()
// 调用 ali-oss 中的方法
put(`${objName}${option.file.name}`, option.file).then(res => {
console.log(res)
this.fileList.push(res)
console.log(this.fileList)
this.emitInput(this.fileList)
})
}
} }
};
}
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
......
src/components/Upload/specialUpload.vue
View file @ 9d1eab8d
...@@ -4,11 +4,11 @@ ...@@ -4,11 +4,11 @@
<el-upload <el-upload
:http-request="handleUpload" :http-request="handleUpload"
:before-remove="beforeRemove" :before-remove="beforeRemove"
:limit="limit"
:accept="accept" :accept="accept"
:show-file-list="false" :show-file-list="false"
:on-remove="handleRemove" :on-remove="handleRemove"
class="upload-demo" class="upload-demo"
:before-upload="beforeUpload"
action action
multiple multiple
> >
...@@ -97,7 +97,7 @@ export default { ...@@ -97,7 +97,7 @@ export default {
fileList: { fileList: {
type: Array, type: Array,
default: () => [] default: () => []
}, }
}, },
data() { data() {
return { return {
...@@ -140,12 +140,26 @@ export default { ...@@ -140,12 +140,26 @@ export default {
this.$emit('input', value); this.$emit('input', value);
}, },
beforeUpload(file) { beforeUpload(file) {
const max = this.max; // 生成的文件名称
const isLt2M = file.size / 1024 / 1024 < max; console.log(this.fileList.length, this.limit);
if (!isLt2M) { if (this.fileList.length == this.limit) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`); this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
return;
} }
return isLt2M; let objName = getFileNameUUID();
// 调用 ali-oss 中的方法
put(`${objName}${file.name}`, file).then((res) => {
res.size = file.size;
res.uploadTime = getcurrentTime();
res.createTime = getTime();
res.free = true;
res.price = '';
// /* res.fileName = res.name */
res.fileName = file.name;
res.fileUrl = res.url;
this.fileList.push(res);
this.$emit('input', this.fileList);
});
}, },
handleRemove(file, fileList, index) { handleRemove(file, fileList, index) {
console.log(fileList); console.log(fileList);
...@@ -153,37 +167,14 @@ export default { ...@@ -153,37 +167,14 @@ export default {
this.fileList = fileList; this.fileList = fileList;
this.emitInput(fileList); this.emitInput(fileList);
}, },
// handleExceed(files, fileList) {
// this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
// },
beforeRemove(file, fileList) { beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`); return this.$confirm(`确定移除 ${file.name}？`);
}, },
/** /**
* 自定义上传方法 * 自定义上传方法
*/ */
handleUpload(option) { handleUpload(option) {},
const max = this.max;
const isLt2M = option.file.size / 1024 / 1024 < max;
if (isLt2M) {
// 生成的文件名称
let objName = getFileNameUUID();
// 调用 ali-oss 中的方法
console.log(option);
put(`${objName}${option.file.name}`, option.file).then((res) => {
res.size = option.file.size;
res.uploadTime = getcurrentTime();
res.time = getTime();
res.free = true;
res.price = '';
// /* res.fileName = res.name */
res.fileName = option.file.name;
res.fileUrl = res.url;
this.fileList.push(res);
this.$emit('input', this.fileList);
});
}
},
handleDelete(index) { handleDelete(index) {
this.fileList.splice(index, 1); this.fileList.splice(index, 1);
this.$emit('input', this.fileList); this.$emit('input', this.fileList);
......
src/pages/purchaser/bid/releaseProject/releaseProject.vue
View file @ 9d1eab8d
...@@ -56,7 +56,7 @@ export default { ...@@ -56,7 +56,7 @@ export default {
}, },
data() { data() {
return { return {
activeIdx: 0, activeIdx: 3,
allForm: {} allForm: {}
} }
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment