a16e72c8 by zhangmeng

请求头

1 parent 08fc48dc
...@@ -27,25 +27,27 @@ ...@@ -27,25 +27,27 @@
27 </draggable> 27 </draggable>
28 <el-upload 28 <el-upload
29 ref="imageUpload" 29 ref="imageUpload"
30 :multiple="limit > 1" 30 :accept="accept"
31 :action="actionUrl || uploadImgUrl" 31 :action="actionUrl || uploadImgUrl"
32 list-type="picture-card" 32 :before-remove="handleDelete"
33 :on-success="handleUploadSuccess"
34 :before-upload="handleBeforeUpload" 33 :before-upload="handleBeforeUpload"
34 :class="{ hide: fileList.length >= limit }"
35 :disabled="disabled"
36 :file-list="fileListInUpload"
37 :headers="headers"
35 :limit="limit" 38 :limit="limit"
39 :multiple="limit > 1"
40 :name="paramName"
36 :on-error="handleUploadError" 41 :on-error="handleUploadError"
37 :on-exceed="handleExceed" 42 :on-exceed="handleExceed"
38 :before-remove="handleDelete"
39 :show-file-list="showFileList"
40 :headers="headers"
41 :on-preview="handlePictureCardPreview" 43 :on-preview="handlePictureCardPreview"
42 :file-list="fileListInUpload" 44 :on-success="handleUploadSuccess"
43 :class="{ hide: fileList.length >= limit }" 45 :show-file-list="showFileList"
44 :name="paramName" 46 list-type="picture-card"
45 :disabled="disabled"
46 :accept="accept"
47 > 47 >
48 <el-icon class="avatar-uploader-icon"><plus /></el-icon> 48 <el-icon class="avatar-uploader-icon">
49 <plus />
50 </el-icon>
49 </el-upload> 51 </el-upload>
50 </el-row> 52 </el-row>
51 53
...@@ -65,9 +67,9 @@ ...@@ -65,9 +67,9 @@
65 67
66 <el-dialog 68 <el-dialog
67 v-model="dialogVisible" 69 v-model="dialogVisible"
70 append-to-body
68 title="预览" 71 title="预览"
69 width="800px" 72 width="800px"
70 append-to-body
71 > 73 >
72 <img 74 <img
73 :src="dialogImageUrl" 75 :src="dialogImageUrl"
...@@ -81,6 +83,7 @@ ...@@ -81,6 +83,7 @@
81 import { getToken } from '@/utils/auth' 83 import { getToken } from '@/utils/auth'
82 import { computed, getCurrentInstance, ref, watch, defineProps, defineEmits } from 'vue' 84 import { computed, getCurrentInstance, ref, watch, defineProps, defineEmits } from 'vue'
83 import _ from 'lodash' 85 import _ from 'lodash'
86 import { useStorage } from '@vueuse/core/index'
84 87
85 const props = defineProps({ 88 const props = defineProps({
86 modelValue: [String, Object, Array], 89 modelValue: [String, Object, Array],
...@@ -136,13 +139,17 @@ const actionUrl = computed(() => { ...@@ -136,13 +139,17 @@ const actionUrl = computed(() => {
136 }) 139 })
137 const { proxy } = getCurrentInstance() 140 const { proxy } = getCurrentInstance()
138 const emit = defineEmits(['update:modelValue', 'response']) 141 const emit = defineEmits(['update:modelValue', 'response'])
142 const language = useStorage('language', 0)
139 const number = ref(0) 143 const number = ref(0)
140 const uploadList = ref([]) 144 const uploadList = ref([])
141 const dialogImageUrl = ref('') 145 const dialogImageUrl = ref('')
142 const dialogVisible = ref(false) 146 const dialogVisible = ref(false)
143 const baseUrl = import.meta.env.VITE_APP_BASE_API 147 const baseUrl = import.meta.env.VITE_APP_BASE_API
144 const uploadImgUrl = ref(baseUrl + '/upload/uploadImgToLocalServer') // 上传的图片服务器地址 148 const uploadImgUrl = ref(baseUrl + '/upload/uploadImgToLocalServer') // 上传的图片服务器地址
145 const headers = ref({ Authorization: 'Bearer ' + getToken() }) 149 const headers = ref({
150 Authorization: 'Bearer ' + getToken(),
151 'Content-Language': language.value == 0 ? 'zh_CN' : 'en_US'
152 })
146 const fileList = ref([]) 153 const fileList = ref([])
147 const fileListInUpload = ref([]) 154 const fileListInUpload = ref([])
148 const showTip = computed( 155 const showTip = computed(
...@@ -229,11 +236,10 @@ function handleUploadSuccess(res, file) { ...@@ -229,11 +236,10 @@ function handleUploadSuccess(res, file) {
229 proxy.$refs.imageUpload.handleRemove(file) 236 proxy.$refs.imageUpload.handleRemove(file)
230 uploadedSuccessfully() 237 uploadedSuccessfully()
231 } 238 }
232 }else { 239 } else {
233 proxy?.$modal.closeLoading() 240 proxy?.$modal.closeLoading()
234 emit('response', res) 241 emit('response', res)
235 } 242 }
236
237 } 243 }
238 244
239 // 删除图片 245 // 删除图片
...@@ -292,11 +298,12 @@ function draggableEnd() { ...@@ -292,11 +298,12 @@ function draggableEnd() {
292 } 298 }
293 </script> 299 </script>
294 300
295 <style scoped lang="scss"> 301 <style lang="scss" scoped>
296 // .el-upload--picture-card 控制加号部分 302 // .el-upload--picture-card 控制加号部分
297 :deep(.hide .el-upload--picture-card) { 303 :deep(.hide .el-upload--picture-card) {
298 display: none; 304 display: none;
299 } 305 }
306
300 .fileItem { 307 .fileItem {
301 position: relative; 308 position: relative;
302 width: 160px; 309 width: 160px;
...@@ -305,11 +312,13 @@ function draggableEnd() { ...@@ -305,11 +312,13 @@ function draggableEnd() {
305 margin: 0 20px 20px 0; 312 margin: 0 20px 20px 0;
306 float: left; 313 float: left;
307 } 314 }
315
308 .fileItem img { 316 .fileItem img {
309 width: 100%; 317 width: 100%;
310 height: 100%; 318 height: 100%;
311 object-fit: cover; 319 object-fit: cover;
312 } 320 }
321
313 .fileItem .hover-actions { 322 .fileItem .hover-actions {
314 background: rgba(0, 0, 0, 0.4); 323 background: rgba(0, 0, 0, 0.4);
315 width: 100%; 324 width: 100%;
...@@ -320,6 +329,7 @@ function draggableEnd() { ...@@ -320,6 +329,7 @@ function draggableEnd() {
320 color: #fff; 329 color: #fff;
321 transition: top 0.2s; 330 transition: top 0.2s;
322 text-align: center; 331 text-align: center;
332
323 span { 333 span {
324 cursor: pointer; 334 cursor: pointer;
325 font-size: 26px; 335 font-size: 26px;
...@@ -327,10 +337,12 @@ function draggableEnd() { ...@@ -327,10 +337,12 @@ function draggableEnd() {
327 margin: 50px 5px; 337 margin: 50px 5px;
328 display: inline-block; 338 display: inline-block;
329 } 339 }
340
330 span:hover { 341 span:hover {
331 background: rgba(255, 255, 255, 0.4); 342 background: rgba(255, 255, 255, 0.4);
332 } 343 }
333 } 344 }
345
334 .fileItem:hover .hover-actions { 346 .fileItem:hover .hover-actions {
335 top: 0; 347 top: 0;
336 } 348 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!