<el-upload
:limit="6"
:before-upload="beforeAvatarUpload"
:on-success="onSuccess"
:on-exceed="handleExceed"
:action="uploadAddr"
:headers="{
token: token()
}"
ref="upload"
list-type="picture-card"
:file-list="fileList"
multiple
:on-change="handleIntroduceUploadHide"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
<!-- :before-upload="beforeAvatarUpload" -->
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
//这块是token
private token = () => {
return this.$store.state.system.token
}
private dialogAddorEdit: Boolean = false
private titles: string = ''
private id: string = ''
private uploadAddr: string = ''
private uploadAddr2: string = ''
public openDialog(key, val) {
const apiAddr = getConfigByName('apiAddr')
this.uploadAddr = apiAddr + '/tool/uploadImg'
this.uploadAddr2 = apiAddr
if (key == '新增') {
this.fileListAll = []
this.formData = {}
// this.hideUpload = false
this.dialogAddorEdit = true
// this.imgbase64str = ''
this.fileList = []
this.titles = key
} else if (key == '编辑') {
console.log('编辑', val)
// warehouseImage
this.dialogAddorEdit = true
this.titles = key
this.id = val.id
this.formData = JSON.parse(JSON.stringify(val))
this.fileList = []
this.fileListAll = []
//重要,如果回显的图片没有token用这个,用来回显
// 用来一开始显示
val.warehouseImage.forEach((item) => {
axios.get(item, { responseType: 'blob', headers: { token: this.$store.state.system.token } }).then((res) => {
let x = URL.createObjectURL(res.data)
this.fileList.push({ url: x })
})
let arr = item.split('/')
this.fileListAll.push(arr[arr.length - 1])
// this.fileList.push({ url: item })
})
}
}
// 自定义上传 重要
private imgbase64str: string = ''
private async overridehttprequest(e) {
this.imgbase64str = await this.blobToBase64(e.file)
this.fileList.push({
name: e.file.name,
url: this.imgbase64str
})
}
// 转64
private blobToBase64(blob): Promise<any> {
return new Promise<any>((resolve, reject) => {
let fileReader = new FileReader()
fileReader.onload = (e) => {
resolve(e.target.result)
}
fileReader.readAsDataURL(blob)
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'))
}
})
}
private handleExceed() {
//提示最多只能上传3个
this.$message.warning('图片数量最多为6张!')
}
// 用于隐藏
private hideUpload: boolean = false
private limitCount: Number = 1
// 放图片
private fileList: any[] = []
private dialogVisible: boolean = false
// 上传成功
private onSuccess(res, file) {
if (this.titles == '编辑') {
let resurl = res.data.imgUrl
this.fileListAll.push(resurl)
console.log('tupianaa', this.fileListAll)
} else {
let resurl = res.data.imgUrl
this.fileListAll.push(resurl)
console.log('上传成功后得图片', this.fileListAll)
}
}
// 文件删除时
private async handleRemove(file, fileList) {
console.log(file)
this.fileList = fileList
let res = await contractDeleteImages({ imgName: file.name })
if (this.titles == '新增') {
this.fileListAll = this.fileListAll.filter((item) => {
return item != file.response.data.imgUrl
})
} else {
console.log(file)
if (file.response) {
this.fileListAll = this.fileListAll.filter((item) => {
return item != file.response.data.imgUrl
})
} else {
let arr = file.url.split('/')
console.log('filelistall得数据,item', arr[arr.length - 1])
this.fileListAll = this.fileListAll.filter((item) => {
return item != arr[arr.length - 1]
})
}
}
}
//文件状态改变的钩子
private handleIntroduceUploadHide(file, fileList) {}
// 删除前
private beforeRemove(file, fileList) {}
private dialogImageUrl: string = ''
// 点击文件列表中已上传的文件时的钩子
private handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
}
// 上传图片之前校验
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpg'
const isJPEG = file.type === 'image/jpeg'
const isPNG = file.type === 'image/png'
if (!isPNG && !isJPG && !isJPEG) {
this.$message.error('只能上传jpg,png,jpeg格式的图片!')
}
return isPNG || isJPG || isJPEG
}
private fileListAll: any[] = []
Ts中El-upload上传不了图片,回显也回显不了,需要token写法
于 2023-10-25 13:30:09 首次发布