Skip to content

W
web-site
Commit 44cfaf49 authored by 吴冠's avatar 吴冠
Browse files
Options

pic

parent cf8465ff
Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 226 deletions
components/Upload/Upload.vue
View file @ 44cfaf49
<template>
<div class="hello">
<el-upload
:http-request="handleUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-remove="beforeRemove"
:limit="limit"
:on-exceed="handleExceed"
:file-list="fileList"
:list-type="listType"
:accept="accept"
class="upload-demo"
action
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>
</div>
<div class="hello">
<el-upload
:http-request="handleUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-remove="beforeRemove"
:limit="limit"
:on-exceed="handleExceed"
:file-list="fileList"
:list-type="listType"
:accept="accept"
class="upload-demo"
action
multiple
>
<el-button size="small" type="primary">点击上传</el-button>
<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',
props: {
accept: {
type: String,
default: '.pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx'
name: "Upload",
props: {
accept: {
type: String,
default: ".pdf,.jpg,.jpeg,.zip,.rar,.doc,.docx",
},
tip: {
type: String,
default: "上传大小不能超过2M",
},
limit: {
type: Number,
default: 5,
},
action: {
type: String,
default: "",
},
headers: {
type: Object,
default: () => {},
},
name: {
type: String,
default: "",
},
listType: {
type: String,
default: "text",
},
max: {
type: Number,
default: 10,
},
fileList: {
type: Array,
default: () => [],
},
},
tip: {
type: String,
default: '上传大小不能超过2M'
data() {
return {};
},
limit: {
type: Number,
default: 5
methods: {
emitInput(fileList) {
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;
value.push(message);
}
this.$emit("input", value);
},
beforeUpload(file) {
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 <script max;
if (isLt2M) {
// 生成的文件名称
let objName = getFileNameUUID();
// 调用 ali-oss 中的方法
put(`${objName}${option.file.name}`, option.file).then(
(res) => {
res.fileName = res.name;
res.fileUrl = res.url;
this.fileList.push(res);
this.emitInput(this.fileList);
}
);
}
},
},
action: {
type: String,
default: ''
},
headers: {
type: Object,
default: () => {}
},
name: {
type: String,
default: ''
},
listType: {
type: String,
default: 'text'
},
max: {
type: Number,
default: 10
},
fileList:{
type: Array,
default: () => []
},
},
data() {
return {
}
},
methods: {
emitInput(fileList) {
let value = []
for (let i = 0; i < fileList.length; i++) {
let message = {}
message.fileName = fileList[i].name
message.fileUrl = fileList[i].url
value.push(message)
}
this.$emit('input', value)
},
beforeUpload(file) {
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 => {
res.fileName = res.name
res.fileUrl = res.url
this.fileList.push(res)
this.emitInput(this.fileList)
})
}
}
}
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
......
components/Upload/imgUpload.vue
View file @ 44cfaf49
<template>
<div>
<div v-show="!dialogVisible">
<el-upload
:http-request="handleUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:file-list="fileList"
:limit="limit"
accept=".jpg, .jpeg, .png, .gif"
action
list-type="picture-card">
<i class="el-icon-plus" v-if="!dialogVisible"></i>
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>
<div>
<div v-show="!dialogVisible">
<el-upload
:http-request="handleUpload"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:before-remove="beforeRemove"
:file-list="fileList"
:limit="limit"
accept=".jpg, .jpeg, .png, .gif"
action
list-type="picture-card"
>
<i class="el-icon-plus" v-if="!dialogVisible"></i>
<div slot="tip" class="el-upload__tip">{{ tip }}</div>
</el-upload>
</div>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="" />
</el-dialog>
</div>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog>
</div>
</template>
<script>
import {
put,
getFileNameUUID
} from '~/api/ali-oss'
import { put, getFileNameUUID } from "~/api/ali-oss";
export default {
props: {
tip: {
type: String,
default: '上传大小不能超过10M'
props: {
tip: {
type: String,
default: "上传大小不能超过10M",
},
limit: {
type: Number,
default: 3,
},
max: {
type: Number,
default: 10,
},
fileList: {
type: Array,
default: () => [],
},
},
limit: {
type: Number,
default: 3
},
max: {
type: Number,
default: 10
},
fileList:{
type: Array,
default: () => []
},
},
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
}
},
methods: {
beforeUpload(file) {
const max = this.max
const isLt2M = file.size / 1024 / 1024 < max
if (!isLt2M) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`)
}
return isLt2M
},
emitInput(fileList) {
let value = []
for (let i = 0; i < fileList.length; i++) {
let message = {}
message.fileName = fileList[i].name
message.fileUrl = fileList[i].url
value.push(message)
}
this.$emit('input', value)
},
handleExceed(files, fileList) {
this.$message.warning(`每次只能上传 ${this.limit} 个文件`)
data() {
return {
dialogImageUrl: "",
dialogVisible: false,
};
},
methods: {
beforeUpload(file) {
const max = this.max;
const isLt2M = file.size / 1024 / 1024 < max;
if (!isLt2M) {
this.$message.error(`上传附件大小不能超过 ${max} MB!`);
}
return isLt2M;
},
emitInput(fileList) {
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;
value.push(message);
}
this.$emit("input", value);
},
handleExceed(files, fileList) {
this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
handleRemove(file, fileList) {
this.fileList = fileList
this.emitInput(fileList)
},
handleSuccess(response, file, fileList) {
console.log('成功')
this.fileList = fileList
this.$emit('on-success', file, fileList)
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleRemove(file, fileList) {
this.fileList = fileList;
this.emitInput(fileList);
},
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) => {
res.fileName = res.name;
res.fileUrl = res.url;
this.fileList.push(res);
this.emitInput(this.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 => {
res.fileName = res.name
res.fileUrl = res.url
this.fileList.push(res)
this.emitInput(this.fileList)
})
}
}
}
}
};
</script>
pages/login/examine.vue
View file @ 44cfaf49
......@@ -820,7 +820,7 @@ export default {
fileList: [],
flag: true, //该值变化，就会触发刷新
code: "", //刷新后的验证码
active: 0,
active: 1,
checked: true,
adminform: {
name: "",
......
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