|
|
@@ -0,0 +1,137 @@
|
|
|
+<template>
|
|
|
+ <div id="upload">
|
|
|
+ <el-upload
|
|
|
+ v-if="url"
|
|
|
+ ref="upload"
|
|
|
+ :action="url"
|
|
|
+ :list-type="listType"
|
|
|
+ :file-list="fileList"
|
|
|
+ :limit="limit"
|
|
|
+ :on-exceed="outLimit"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :before-remove="handleRemove"
|
|
|
+ :on-success="onSuccess"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ :show-file-list="showList"
|
|
|
+ accept=".3gpp,.ac3,.au,.mp2,.mp3,.mp4,.mpeg,.mpg,.wmv,.avi,.flv"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" v-if="isBtn">点击上传</el-button>
|
|
|
+ <template v-else-if="uploadBtn">
|
|
|
+ <el-button type="danger">选择文件</el-button>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-button type="primary" size="mini">选择文件</el-button>
|
|
|
+ </template>
|
|
|
+ <template #tip v-if="tip">
|
|
|
+ {{ tip }}
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :visible.sync="dialogVisible">
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash';
|
|
|
+export default {
|
|
|
+ name: 'upload',
|
|
|
+ props: {
|
|
|
+ url: { type: null },
|
|
|
+ limit: { type: Number },
|
|
|
+ data: { type: null },
|
|
|
+ type: { type: String },
|
|
|
+ isBtn: { type: Boolean, default: false },
|
|
|
+ uploadBtn: { type: Boolean, default: false },
|
|
|
+ showList: { type: Boolean, default: true },
|
|
|
+ tip: { type: String, default: undefined },
|
|
|
+ listType: { type: String, default: 'picture-card' },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => ({
|
|
|
+ dialogVisible: false,
|
|
|
+ dialogImageUrl: '',
|
|
|
+ fileList: [],
|
|
|
+ }),
|
|
|
+ created() {
|
|
|
+ if (this.data) {
|
|
|
+ this.defalutProcess(this.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ data: {
|
|
|
+ handler(val) {
|
|
|
+ this.defalutProcess(val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ handleRemove(file, fileList) {
|
|
|
+ this.$set(this, `fileList`, []);
|
|
|
+ // let index = fileList.findIndex(f => _.isEqual(f, file));
|
|
|
+ // this.$emit('delete', index);
|
|
|
+ // return false;
|
|
|
+ },
|
|
|
+ outLimit() {
|
|
|
+ this.$message.error(`只允许上传${this.limit}个文件`);
|
|
|
+ },
|
|
|
+ onSuccess(response, file, fileList) {
|
|
|
+ //将文件整理好传回父组件
|
|
|
+ this.$emit('upload', { type: this.type, data: { ...response, name: file.name } });
|
|
|
+ },
|
|
|
+ beforeUpload(file) {
|
|
|
+ if (
|
|
|
+ file.type == 'video/mp4' ||
|
|
|
+ file.type == 'video/3gpp' ||
|
|
|
+ file.type == 'video/ac3' ||
|
|
|
+ file.type == 'video/au' ||
|
|
|
+ file.type == 'video/mp2' ||
|
|
|
+ file.type == 'video/mp3' ||
|
|
|
+ file.type == 'video/mpeg' ||
|
|
|
+ file.type == 'video/mpg' ||
|
|
|
+ file.type == 'video/wmv' ||
|
|
|
+ file.type == 'video/avi' ||
|
|
|
+ file.type == 'video/flv'
|
|
|
+ ) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ this.$message.error('只允许上传视频格式文件');
|
|
|
+ this.$set(this, `fileList`, []);
|
|
|
+ }
|
|
|
+ const sizeLimit = file.size / 1024 / 1024 < 1;
|
|
|
+ if (sizeLimit) return true;
|
|
|
+ else {
|
|
|
+ this.$message.error('文件超出10M！');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ defalutProcess(val) {
|
|
|
+ if (_.isArray(val)) {
|
|
|
+ let newArr = val.map(item => {
|
|
|
+ let object = {};
|
|
|
+ object.name = item.name;
|
|
|
+ object.url = item.url;
|
|
|
+ return object;
|
|
|
+ });
|
|
|
+ this.$set(this, `fileList`, newArr);
|
|
|
+ } else if (_.isObject(val)) {
|
|
|
+ let object = {};
|
|
|
+ if (_.get(val, `url`)) {
|
|
|
+ object.name = val.name;
|
|
|
+ object.url = val.url;
|
|
|
+ this.$set(this, `fileList`, [object]);
|
|
|
+ }
|
|
|
+ } else if (typeof val === 'string') {
|
|
|
+ this.$set(this, `fileList`, [{ name: '附件', url: val }]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|
