Commit 9d1eab8d authored by 张冬's avatar 张冬

上传跳动问题

parent 36210671
<template>
<div class="hello">
<div v-loading="loading"></div>
<el-upload
v-loading.fullscreen.lock="loading"
:http-request="handleUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-remove="beforeRemove"
......@@ -13,20 +9,22 @@
:file-list="fileList"
:list-type="listType"
:accept="accept"
:before-upload="beforeUpload"
class="upload-demo"
action
multiple>
action="Fake Action"
:http-request="handleUpload"
multiple
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
<div slot="tip" class="el-upload__tip">
{{ tip }}
</div>
</el-upload>
</div>
</template>
<script>
import {
put,
getFileNameUUID
} from '@api/ali-oss'
import { put, getFileNameUUID } from '@api/ali-oss';
export default {
name: 'Upload',
......@@ -51,7 +49,7 @@ export default {
type: Object,
default: () => {}
},
fileList:{
fileList: {
type: Array,
default: () => []
},
......@@ -70,76 +68,63 @@ export default {
},
data() {
return {
loading:false
}
loading: false
};
},
created(){
console.log(this.fileList)
created() {
console.log(this.fileList);
},
methods: {
emitInput(fileList) {
this.loading=false
let value = []
let value = [];
for (let i = 0; i < fileList.length; i++) {
let message = {}
message.name = fileList[i].name
message.url = fileList[i].url
message.fileName = fileList[i].name
message.fileUrl = fileList[i].url
message.uid=fileList[i].uid
value.push(message)
let message = {};
message.name = fileList[i].name;
message.url = fileList[i].url;
message.fileName = fileList[i].name;
message.fileUrl = fileList[i].url;
message.uid = fileList[i].uid;
value.push(message);
}
this.$emit('input', value)
console.log(value)
this.$emit('input', value);
},
beforeUpload(file) {
// 生成的文件名称
this.loading=false
let objName = getFileNameUUID();
// 调用 ali-oss 中的方法
put(`${objName}${file.name}`, file).then((res) => {
console.log(res);
this.fileList.push(res);
this.loading=true
const max = this.max
const isLt2M = file.size / 1024 / 1024 < max
if (!isLt2M) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`)
}
return isLt2M
this.emitInput(this.fileList);
});
},
handleRemove(file, fileList, index) {
this.$emit('on-remove', file, fileList)
this.fileList = fileList
this.emitInput(fileList)
},
handlePreview(file) {
this.$emit('on-preview', file)
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} 个文件`)
this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`)
return this.$confirm(`确定移除 ${file.name}?`);
},
handleSuccess(response, file, fileList) {
console.log('成功')
this.fileList = fileList
this.$emit('on-success', file, fileList)
console.log('成功');
},
/**
* 自定义上传方法
*/
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)
})
}
}
handleUpload(option) {}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
......
......@@ -4,11 +4,11 @@
<el-upload
:http-request="handleUpload"
:before-remove="beforeRemove"
:limit="limit"
:accept="accept"
:show-file-list="false"
:on-remove="handleRemove"
class="upload-demo"
:before-upload="beforeUpload"
action
multiple
>
......@@ -97,7 +97,7 @@ export default {
fileList: {
type: Array,
default: () => []
},
}
},
data() {
return {
......@@ -140,12 +140,26 @@ export default {
this.$emit('input', value);
},
beforeUpload(file) {
const max = this.max;
const isLt2M = file.size / 1024 / 1024 < max;
if (!isLt2M) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`);
// 生成的文件名称
console.log(this.fileList.length, this.limit);
if (this.fileList.length == this.limit) {
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) {
console.log(fileList);
......@@ -153,37 +167,14 @@ export default {
this.fileList = fileList;
this.emitInput(fileList);
},
// handleExceed(files, fileList) {
// this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
// },
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
/**
* 自定义上传方法
*/
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);
});
}
},
handleUpload(option) {},
handleDelete(index) {
this.fileList.splice(index, 1);
this.$emit('input', this.fileList);
......
......@@ -56,7 +56,7 @@ export default {
},
data() {
return {
activeIdx: 0,
activeIdx: 3,
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