优化报废图片上传问题
This commit is contained in:
BianLzhaoMin
parent
ee30623248
commit
6a64086767
|
|
@ -1,27 +1,27 @@
|
|||
import request from '@/utils/request'
|
||||
//资源图片上传
|
||||
export function imgUpLoad(param){
|
||||
const formData = new FormData()
|
||||
formData.append('file', param.file)
|
||||
formData.append('fileType', param.type)
|
||||
return request({
|
||||
url: '/system/sys/file/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
header:'multipart/form-data'
|
||||
})
|
||||
}
|
||||
export function imgUpLoad(param) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', param.file)
|
||||
formData.append('fileType', param.type)
|
||||
return request({
|
||||
url: '/system/sys/file/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
header: 'multipart/form-data'
|
||||
})
|
||||
}
|
||||
|
||||
//资源文件上传
|
||||
export function fileUpLoad(param){
|
||||
const formData = new FormData()
|
||||
formData.append('file', param.file)
|
||||
return request({
|
||||
url: '/system/sys/file/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
})
|
||||
}
|
||||
export function fileUpLoad(param) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', param.file)
|
||||
return request({
|
||||
url: '/system/sys/file/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,6 @@ export default {
|
|||
return
|
||||
}
|
||||
let real_src = this.src.split(',')[0]
|
||||
|
||||
console.log(this.src, '图片地址--')
|
||||
return real_src
|
||||
},
|
||||
realSrcList() {
|
||||
|
|
|
|||
|
|
@ -1,106 +1,110 @@
|
|||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionUrl"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<slot name="default">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</slot>
|
||||
<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
|
||||
</el-upload>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="actionUrl"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:multiple="multiple"
|
||||
:limit="limit"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:on-success="handleSuccess"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeUpload"
|
||||
>
|
||||
<slot name="default">
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</slot>
|
||||
<!-- <div slot="tip" class="el-upload__tip">{{ uploadTip }}</div> -->
|
||||
</el-upload>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
name: 'UploadFile',
|
||||
props: {
|
||||
fileList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
actionUrl: {
|
||||
type: String,
|
||||
default: 'https://jsonplaceholder.typicode.com/posts/',
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
// uploadTip: {
|
||||
// type: String,
|
||||
// default: '只能上传jpg/png文件，且不超过500kb'
|
||||
// },
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
actionUrl: {
|
||||
type: String,
|
||||
default: 'https://jsonplaceholder.typicode.com/posts/',
|
||||
data() {
|
||||
return {
|
||||
uploadImgUrl:
|
||||
process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
uploadData: {
|
||||
fileType: 'sx',
|
||||
},
|
||||
}
|
||||
},
|
||||
limit: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
this.$emit('remove', file, fileList)
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$emit('success', response, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.$emit('preview', file)
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 ${this.limit} 个文件，本次选择了 ${
|
||||
files.length
|
||||
} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
|
||||
)
|
||||
this.$emit('exceed', files, fileList)
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${file.name} ？`)
|
||||
// .then(() => {
|
||||
// this.$emit('before-remove', file, fileList)
|
||||
// })
|
||||
// .catch(() => {})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log('file', file)
|
||||
const isJPGorPNG =
|
||||
file.type == 'image/png' ||
|
||||
file.type == 'image/jpg' ||
|
||||
file.type == 'image/jpeg'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
|
||||
if (!isJPGorPNG) {
|
||||
this.$message.error('只能上传 jpg、jpeg、png 格式的图片')
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传图片大小不能超过 5MB')
|
||||
}
|
||||
return isJPGorPNG && isLt5M
|
||||
},
|
||||
},
|
||||
// uploadTip: {
|
||||
// type: String,
|
||||
// default: '只能上传jpg/png文件，且不超过500kb'
|
||||
// },
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
uploadImgUrl: process.env.VUE_APP_BASE_API + '/dev-api' + this.actionUrl,
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + getToken(),
|
||||
},
|
||||
uploadData: {
|
||||
fileType: 'sx',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleRemove(file, fileList) {
|
||||
this.$emit('remove', file, fileList)
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.$emit('success', response, fileList)
|
||||
},
|
||||
handlePreview(file) {
|
||||
this.$emit('preview', file)
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`
|
||||
)
|
||||
this.$emit('exceed', files, fileList)
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
// return this.$confirm(`确定移除 ${file.name} ？`)
|
||||
// .then(() => {
|
||||
// this.$emit('before-remove', file, fileList)
|
||||
// })
|
||||
// .catch(() => {})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log('file', file)
|
||||
const isJPGorPNG = file.type == 'image/png' || file.type == 'image/jpg' || file.type == 'image/jpeg'
|
||||
const isLt5M = file.size / 1024 / 1024 < 5 // 小于 5MB
|
||||
if (!isJPGorPNG) {
|
||||
this.$message.error('只能上传 jpg、jpeg、png 格式的图片')
|
||||
}
|
||||
if (!isLt5M) {
|
||||
this.$message.error('上传图片大小不能超过 5MB')
|
||||
}
|
||||
return isJPGorPNG && isLt5M
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-demo .el-upload__tip {
|
||||
margin-top: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue