397fdbf3 by jiaozeping@pashanhoo.com

电子签名

1 parent 1b7114a1
...@@ -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 };
......