1.上传图片
<el-upload
action
list-type="picture"
:on-change="loadJsonFromFilelogo"
style="display: inline-block;"
:show-file-list="false"
accept="image/png, image/jpg,image/gif,image/bmp,image/jpeg"
name="upfile"
:http-request="uploadFile"
>
<el-button size="small">选择文件</el-button>
</el-upload>
data定义字段
logo_img: '',
srcList: [],
filelogo: ''
methods方法
methods: {
// 获取文件信息
uploadFile(file) {
this.filelogo = file.file;
},
// 获取logo文件信息
loadJsonFromFilelogo(file, fileList) {
const isLt2K = file.raw.size / 1024 < 200;
if (!isLt2K) {
this.$message.error('上传LOGO图片大小不能超过 200K!');
return false;
}
this.logo_img = file.url;
this.filelogo = file.raw;
this.srcList.push(this.logo_img);
},
//上传文件
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
if (this.filelogo) {
this.uploadForm.append('nav_logo', this.filelogo);
}
var placard_show = this.navForm.placard_show === 'True' ? 'on' : '';
var sys_placard = this.navForm.sys_placard;
this.uploadForm.append('placard_show', placard_show);
this.uploadForm.append('sys_placard', sys_placard);
//提交数据的方法
this.getsysNavPostData(this.uploadForm);
} else {
return false;
}
});
},
}
注意el-upload标签中绑定的action不需要写路径，如果写了官方的路径会报跨域的错误。
2.上传文件
<el-form-item label="上传文件">
<el-upload
class="upload-demo"
action
:file-list="fileList"
:http-request="uploadFile"
:on-change="loadJsonFromFile"
accept="application/vnd.ms-excel"
>
<el-button size="small" type="primary">
<span class="iconfont iconshangchuanyunduan" />
选择表格文件
</el-button>
</el-upload>
</el-form-item>
export default {
data() {
return {
form: {},
fileList: [],
file: '',
// 文件形式
uploadForm: new FormData(),
loading: false
}
},
methods: {
onSubmit() {
if (this.fileList.length === 0) {
this.$message.error('请选择导入文件')
return false
}
this.uploadForm = new FormData()
this.uploadForm.append('file', this.file)
//提交数据
this.importUserData(this.uploadForm)
},
// 获取文件信息
loadJsonFromFile(file, fileList) {
this.file = file.raw
this.fileList = fileList
if (this.fileList.length > 1) {
this.fileList.splice(0, 1)
}
},
// 获取文件信息
uploadFile(file) {
this.file = file.file
},
}
}
3.多个文件上传的时候进行文件的限制
原本是有个属性:file-list="imageList、:limit="5" "，直接绑定你的数据列表既可了，但是它竟然不生效，后台研究发现要使用:on-exceed="exceed" // 上传图片超出数量限制时的钩子进行限制
// 上传图片超出数量限制时的钩子，此方法不会返回fileList的值
exceed(files){
this.$message.error('最多上传3张图片哦！')
},
4.他人的方法，相比较我更详细,记录下
<el-upload
:action="actionUrl" // 图片上传地址
:headers="headers" // 因为上传时需要token,所以需要自定义headers
:before-upload="beforeUpload" // 文件上传前的钩子，可以在这个钩子函数里判断上传的图片的类型和大小是否达标
:limit="5" // 上传图片的个数限制
:on-exceed="exceed" // 上传图片超出数量限制时的钩子
:on-success="uploadSuccess" // 上传成功时的钩子
:on-remove="fileRemove" // 文件列表移除文件时的钩子，也就是删除图片时会触发的钩子
:file-list="imageList" // 上传的文件列表，就是这个坑，下边会细说
accept=".jpg, .jpeg, .png, .gif" // 接受的图片类型
list-type="picture-card" // 文件列表的类型
>
methods:{
//获取商品信息
getGoodsInfo(){
this.$http.get(`/scyyGoodsStore/${this.id}`).then(({data:res}) => {
if(res.code !== 200){
return this.$message.error(res.msg);
}
this.form = {
...this.form,
...res.data
}
let imgList = this.form.imageVoList
imgList.forEach( item => {
this.imageList.push({
id:item.id,
url:item.imageUrl
})
})
})
},
// 上传图片超出数量限制时的钩子
exceed(files, fileList){
this.$message.error('最多上传5张图片哦！')
},
// 文件上传前的钩子，数为上传的文件
beforeUpload(file) {
// 判断图片是否大于2M
const isLt2M = file.size /1024/1024 < 2;
// const fileType = file.name.substring(file.name.lastIndexOf('.')+1)
// 判断图片的类型
const isJpg = file.type == 'image/jpeg' || file.type == 'image/jpg' || file.type == 'image/png' || file.type == 'image/gif'
if(!isJpg){
this.$message.error('只能上传jpg, jpeg, png, gif格式的图片！')
return false
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
return false
}
},
// 上传成功时的钩子
uploadSuccess(res,file,fileList){
if(res.code !== 200){
return this.$message.error(res.msg)
}
this.imageList.push(res.data)
let formImgList = []
this.imageList.forEach(item => {
formImgList.push({
id:item.id,
imageType:0
})
})
this.form.listUploadId = formImgList
},
// 文件列表移除文件时的钩子
fileRemove(file, fileList){
this.imageList= fileList
const list = []
this.imageList.forEach(item => {
list.push({
id:item.id,
imageType:0
})
})
this.form.listUploadId = list
}
}
网友评论