电子签名
Showing
2 changed files
with
47 additions
and
47 deletions
... | @@ -6,7 +6,7 @@ | ... | @@ -6,7 +6,7 @@ |
6 | 6 | ||
7 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) | 7 | let SERVER = window.config ? window.config : JSON.parse(localStorage.getItem('ApiUrl')) |
8 | export function uploadUrl () { | 8 | export function uploadUrl () { |
9 | return process.env.VUE_APP_BASE_API + SERVER.SERVERAPI + '/file/upload' | 9 | return process.env.VUE_APP_BASE_API + SERVER.SERVERAPI + '/system/dzqm/upload' |
10 | } | 10 | } |
11 | 11 | ||
12 | 12 | ... | ... |
... | @@ -20,78 +20,78 @@ | ... | @@ -20,78 +20,78 @@ |
20 | 20 | ||
21 | <di> | 21 | <di> |
22 | <el-upload | 22 | <el-upload |
23 | action="#" | 23 | class="upload-demo" |
24 | list-type="picture-card" | 24 | :action="requestUrl" |
25 | 25 | :on-success="handleSuccess" | |
26 | :auto-upload="false"> | 26 | :on-error="handleError" |
27 | <i slot="default" class="el-icon-plus"></i> | 27 | :before-upload="beforeUpload" |
28 | <div slot="file" slot-scope="{file}"> | 28 | :file-list="fileList" |
29 | <img | 29 | :limit="limitCount" |
30 | class="el-upload-list__item-thumbnail" | 30 | :on-exceed="handleExceed" |
31 | :src="file.url" alt="" | 31 | list-type="picture" |
32 | > | 32 | drag |
33 | <span class="el-upload-list__item-actions"> | ||
34 | <span | ||
35 | class="el-upload-list__item-preview" | ||
36 | @click="handlePictureCardPreview(file)" | ||
37 | > | ||
38 | <i class="el-icon-zoom-in"></i> | ||
39 | </span> | ||
40 | <span | ||
41 | v-if="!disabled" | ||
42 | class="el-upload-list__item-delete" | ||
43 | @click="handleDownload(file)" | ||
44 | > | 33 | > |
45 | <i class="el-icon-download"></i> | 34 | <i class="el-icon-upload"></i> |
46 | </span> | 35 | <div class="el-upload__text">将图片拖到此处,或<em>点击上传</em></div> |
47 | <span | 36 | <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过2MB</div> |
48 | v-if="!disabled" | ||
49 | class="el-upload-list__item-delete" | ||
50 | @click="handleRemove(file)" | ||
51 | > | ||
52 | <i class="el-icon-delete"></i> | ||
53 | </span> | ||
54 | </span> | ||
55 | </div> | ||
56 | </el-upload> | 37 | </el-upload> |
57 | <el-dialog :visible.sync="dialogVisible"> | ||
58 | <img width="100%" :src="dialogImageUrl" alt=""> | ||
59 | </el-dialog> | ||
60 | 38 | ||
61 | </di> | 39 | </di> |
62 | <!-- 表格 --> | 40 | <!-- 表格 --> |
63 | </div> | 41 | </div> |
64 | </template> | 42 | </template> |
65 | <script> | 43 | <script> |
66 | import table from "@/utils/mixin/table"; | ||
67 | import { upload } from "@/api/file.js"; | 44 | import { upload } from "@/api/file.js"; |
45 | import { uploadUrl } from '@/api/dzqm' | ||
68 | 46 | ||
69 | export default { | 47 | export default { |
70 | name: "dzqm", | 48 | name: "dzqm", |
71 | components: {}, | 49 | components: {}, |
72 | mixins: [table], | ||
73 | mounted () { | 50 | mounted () { |
74 | }, | 51 | }, |
75 | data () { | 52 | data () { |
76 | return { | 53 | return { |
77 | dialogImageUrl: '', | 54 | dialogImageUrl: '', |
78 | dialogVisible: false, | 55 | dialogVisible: false, |
79 | disabled: false | 56 | disabled: false, |
57 | |||
58 | yourHeaders: { /* 你的请求头信息 */ }, | ||
59 | fileList: [], // 已上传文件列表 | ||
60 | limitCount: 3, // 限制上传文件的个数 | ||
61 | |||
62 | |||
63 | requestUrl: uploadUrl(), | ||
80 | 64 | ||
81 | } | 65 | } |
82 | }, | 66 | }, |
83 | methods: { | 67 | methods: { |
84 | 68 | handleSuccess(response, file, fileList) { | |
85 | handleRemove(file) { | 69 | // 文件上传成功后的回调 |
86 | console.log(file); | 70 | console.log('上传成功:', response); |
71 | this.fileList = fileList; // 更新已上传文件列表 | ||
87 | }, | 72 | }, |
88 | handlePictureCardPreview(file) { | 73 | handleError(error, file, fileList) { |
89 | this.dialogImageUrl = file.url; | 74 | // 文件上传失败后的回调 |
90 | this.dialogVisible = true; | 75 | console.error('上传失败:', error); |
91 | }, | 76 | }, |
92 | handleDownload(file) { | 77 | beforeUpload(file) { |
93 | console.log(file); | 78 | // 上传文件之前的钩子,返回false则停止上传 |
79 | const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; | ||
80 | const isLt2M = file.size / 1024 / 1024 < 2; | ||
81 | if (!isJPGorPNG) { | ||
82 | this.$message.error('上传图片只能是 JPG/PNG 格式!'); | ||
83 | return false; | ||
94 | } | 84 | } |
85 | if (!isLt2M) { | ||
86 | this.$message.error('上传图片大小不能超过 2MB!'); | ||
87 | return false; | ||
88 | } | ||
89 | return true; | ||
90 | }, | ||
91 | handleExceed(files, fileList) { | ||
92 | // 文件超出个数限制时的回调 | ||
93 | this.$message.warning(`当前限制选择 ${this.limitCount} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`); | ||
94 | }, | ||
95 | 95 | ||
96 | }, | 96 | }, |
97 | }; | 97 | }; | ... | ... |
-
Please register or sign in to post a comment