今天在做需求的时候,有一个是关于营业执照上传的问题:这里坐一下记录,方便后续相同问题 直接使用
代码:这里用的若依框架 更多详细见若依文档
<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; },
效果