今天在做需求的时候,有一个是关于营业执照上传的问题:这里坐一下记录,方便后续相同问题 直接使用
代码:这里用的若依框架 更多详细见若依文档
<el-upload
:action="uploadImgUrl"
list-type="picture-card"
:on-success="handleUploadSuccess"
name="file"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:show-file-list="true"
:limit="limitPicture"
:headers="headers"
:file-list="fileList"
:on-preview="handlePictureCardPreview"
:class="{hide: this.fileList.length >= 1}">
<i class="el-icon-plus"></i>
</el-upload>
return{
limitPicture: 1, //图片上传限制
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
fileList: [],
// 设置上传的请求头部
headers: {
Authorization: "Bearer " + getToken()
},
}
// 上传成功回调
handleUploadSuccess(res) {
// 赋值对应的营业执照信息
this.dialogImageUrl = res.url
},
// 文件个数超出
handleExceed() {
this.$message.error(`上传文件数量不能超过 ${this.limitPicture} 个!`);
},
// 删除图片(这里营业执照只允许一张 所以删除直接清空即可)
handleRemove(file, fileList) {
this.fileList = []
this.dialogImageUrl = ""
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
效果