|
|
@@ -0,0 +1,93 @@
|
|
|
+<template>
|
|
|
+ <div id="c-upload">
|
|
|
+ <el-upload
|
|
|
+ v-if="url"
|
|
|
+ ref="upload"
|
|
|
+ :action="url"
|
|
|
+ :limit="limit"
|
|
|
+ :accept="accept"
|
|
|
+ :list-type="listType"
|
|
|
+ :file-list="fileList"
|
|
|
+ :on-exceed="outLimit"
|
|
|
+ :on-preview="filePreview"
|
|
|
+ :on-success="onSuccess"
|
|
|
+ :before-remove="onRemove"
|
|
|
+ >
|
|
|
+ <el-button type="primary" size="mini">选择文件</el-button>
|
|
|
+ <template #tip v-if="tip">
|
|
|
+ <p style="color: #ff0000">{{ tip }}</p>
|
|
|
+ </template>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :visible.sync="dialog.show" append-to-body>
|
|
|
+ <img width="100%" :src="dialog.url" alt="" />
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import _ from 'lodash';
|
|
|
+export default {
|
|
|
+ name: 'c-upload',
|
|
|
+ props: {
|
|
|
+ // 图片上传地址
|
|
|
+ url: { type: String },
|
|
|
+ // 可上传文件数目
|
|
|
+ limit: { type: Number },
|
|
|
+ // 接收上传的文件类型
|
|
|
+ accept: { type: String, default: 'image/png, image/jpeg' },
|
|
|
+ // 文件列表的类型--picture-card---picture
|
|
|
+ listType: { type: String, default: 'picture-card' },
|
|
|
+ // 文件提醒
|
|
|
+ tip: { type: String, default: undefined },
|
|
|
+ // 已有数据，赋值，预览
|
|
|
+ list: { type: Array },
|
|
|
+ },
|
|
|
+ model: {
|
|
|
+ prop: 'list',
|
|
|
+ event: 'change',
|
|
|
+ },
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ // 图片预览
|
|
|
+ dialog: { show: false, url: '' },
|
|
|
+ // 图片列表
|
|
|
+ fileList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 图片预览
|
|
|
+ filePreview(file) {
|
|
|
+ // this.dialog = { show: true, url: file.url };
|
|
|
+ window.open(file.url);
|
|
|
+ },
|
|
|
+ // 只允许上传多少个文件
|
|
|
+ outLimit() {
|
|
|
+ this.$message.error(`只允许上传${this.limit}个文件`);
|
|
|
+ },
|
|
|
+ // 上传成功,response：成功信息，file：图片信息，fileList：图片列表
|
|
|
+ onSuccess(response, file, fileList) {
|
|
|
+ if (response.errcode !== 0) {
|
|
|
+ this.$message({ message: `上传失败`, type: 'error' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ response = _.omit(response, ['errcode', 'errmsg']);
|
|
|
+ let list = _.cloneDeep(this.list);
|
|
|
+ if (_.isArray(list)) {
|
|
|
+ list.push({ ...response, name: file.name });
|
|
|
+ } else {
|
|
|
+ list = [{ ...response, name: file.name }];
|
|
|
+ }
|
|
|
+ this.$emit('change', list);
|
|
|
+ },
|
|
|
+ // 删除图片
|
|
|
+ onRemove(file, fileList) {
|
|
|
+ let list = _.cloneDeep(this.list);
|
|
|
+ list = list.filter((f) => f.uri !== _.get(file, 'response.uri'));
|
|
|
+ this.$emit('change', list);
|
|
|
+ return true;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped></style>
|
