Skip to content

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

pic

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