前言
意象商场对于新手来说真的是噩梦(恶心!!!!!!)
文件上传
<el-upload
ref="upload"
:limit="1"
:before-upload="beforeUpload"
:auto-upload="true"
:headers="headers"
:on-success="handleSuccess"
:on-error="handleError"
:action="fileUploadApi + '?name=' + form.epFile"
>
<div class="eladmin-upload"><i class="el-icon-upload" /> 添加文件</div>
<div slot="tip" class="el-upload__tip">可上传任意格式文件,且不超过100M</div>
</el-upload>
注册token
headers: { 'Authorization': getToken() },
import {getToken} from "@/utils/auth";
computed: {
...mapGetters([
'baseApi',
'fileUploadApi'
])
},
上传方法
handleSuccess(response, file, fileList) {
this.form.epFile = response.path
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
// this.$refs.upload.clearFiles()
// this.crud.status.add = CRUD.STATUS.NORMAL
// this.crud.resetForm()
this.crud.toQuery()
},
beforeUpload(file) {
let isLt2M = true
isLt2M = file.size / 1024 / 1024 < 100
if (!isLt2M) {
this.loading = false
this.$message.error('上传文件大小不能超过 100MB!')
}
console.log(file,"555555")
this.form.epFile = this.epFile
return isLt2M
},
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.$notify({
title: msg.message,
type: 'error',
duration: 2500
})
this.loading = false
},
图片上传
<el-upload
:action="imagesUploadApi"
:headers="headers"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleUploadSuccess"
:file-list="imageList"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus" />
</el-upload>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
headers: {
'Authorization': getToken()
},
computed: {
...mapGetters([
'imagesUploadApi'
]),
imageList() {
const res = []
if (this.value) {
const imageArray = this.value.split(',')
for (let i = 0; i < imageArray.length; i++) {
res.push({ url: this.resourcesUrl + imageArray[i], response: imageArray[i] })
}
}
this.$emit('input', this.value)
console.log(res)
return res
}
},
// 图片上传
handleUploadSuccess(response, file, fileList) {
console.log(file,"111")
console.log(fileList)
console.log(response)
this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
this.form.ecName = file.url
// const pics = fileList.map(file => {
// if ((typeof file.response) === 'object') {
// return file.response.data[0]
// } else {
// return file.response
// }
// }).join(',')
// console.log(pics,'1110')
this.$emit('input', pics)
},
// 限制图片上传大小
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isLt2M
},
handlePictureCardPreview(file) {
console.log(file,'111')
// this.dialogImageUrl =
this.form.ecName = file.url
this.dialogVisible = true
},
handleRemove(file, fileList) {
const pics = fileList.map(file => {
return file.response
}).join(',')
this.$emit('input', pics)
},
// 监听上传失败
handleError(e, file, fileList) {
const msg = JSON.parse(e.message)
this.$notify({
title: msg.message,
type: 'error',
duration: 2500
})
},